<div id='images'><img id='center_loadingImage' align='middle' src='loading.gif' alt='Loading Image'></div>

How to remove all <div> with the loop with Javascript?

Here is my code:

var value = document.getElementsByTagName("images");
for (var i = 0; i < value.length; i++) {
    $(value[i]).remove();
}

<div id='images'><img id='center_loadingImage' align='middle' src='loading.gif' alt='Loading Image'></div>

How to remove all <div> with the loop with Javascript?

Here is my code:

var value = document.getElementsByTagName("images");
for (var i = 0; i < value.length; i++) {
    $(value[i]).remove();
}

• javascript
• jquery
• html
• css

• use class instead of id – rajesh kakawat Commented Apr 4, 2014 at 7:25

5 Answers 5

You can only use same id value once per page. Change it to class, i.e. images

You will then have multiple div with class images and will be able to easily remove the spinners like this:

$(".images").remove();

If you have a lot of spinners, just wrap them with a div and remove the div. Something like this:

HTML:

<div id="jedi-wrapper">
    <div class="images">
        ...
    </div>
</div>

jQuery:

$("#jedi-wrapper").remove();

From the image, it looks like you are loading some values using AJAX. Why don't you remove the image on success?

Hope that helps

You should probably be using class="images" instead of id="images" if that element is being rendered multiple times.

But to do this in a loop with raw javascript, you will need to first get the elements, convert them to an array, and then remove them in a loop.

var imageElements = doc.getElementsByClassName('images'),
    images = Array.prototype.slice.call(imageElements);

for (var i = 0, l = images.length; i < l; i++) {
    images[i].remove();
}

Notice that I don't just loop through imageElements... That's because getElementsBy...() returns a live list, so as soon as you remove() one of them, the list will be mutated and you will start running into undefined elements and javascript errors. To solve this, simply convert the live list to an array with Array.prototype.slice.call() and then loop through that array, removing the elements from the page.

Seem like you want to remove all div with id images, but id is unique, you can use class instead:

<div class='images'><img class='center_loadingImage' align='middle' src='loading.gif' alt='Loading Image'></div>

then you can do:

$('.images').remove()

With your code you can do this:

document.getElementsByClassName("images").remove();

or more like jQuery:

$('.images').remove();

Althoug you can try this too:

var value = document.getElementsByClassName("images");
for (var i = 0; i < value.length; i++) {
   $(value).eq(i).remove();
} //-------^^^^^^--------------you can make use of `.eq()` here

What your issue is there is no tag name like 'images' as your var suggests.

var value = document.getElementsByTagName("images");

images is the class name so you can use this:

 document.getElementsByClassName("images")

Get element by ID, there's nothing with document.getElementsByTagName("images")

var c = document.getElementById('images');
var i, item = c.childNodes;
for (i = item.length; i--;) {
    c.removeChild(item[i]);
}