I have four images and I want to remove the other 3 when anyone is clicked.

I could do it one by one with:

function removeimages() {
var elem = document.getElementById('image1');
elem.parentNode.removeChild(elem);
}

but that is not practical.

What is the best way to remove all the siblings (images) except the one clicked?

I have four images and I want to remove the other 3 when anyone is clicked.

I could do it one by one with:

function removeimages() {
var elem = document.getElementById('image1');
elem.parentNode.removeChild(elem);
}

but that is not practical.

What is the best way to remove all the siblings (images) except the one clicked?

• javascript
• siblings

• 3 Have you tried anything? – j08691 Commented Mar 24, 2014 at 16:31
• Show us the code that you have been trying before you posted your question. – lshettyl Commented Mar 24, 2014 at 16:32
• allthethings.onclick = function(){ for(var i = 0; i < document.images.length; i++){ if(document.images[i] == this)continue;document.images[i].parentNode.removeChild(document.images[i]);} }; – Travis J Commented Mar 24, 2014 at 16:34

1 Answer 1

Why don't you try to use jquery to manipulate the DOM? It will be much easier and be supported by most browsers. The code is as follows:

$("#imgContainer img").click(function () {
    $(this).siblings().remove();
});

Please have a look at this working version: JS Fiddle