When I load my page, a nodeList gets created, and it looks like this:

[text, h4, text, span, br, input, br, span, br, input, br, span, br, input, br, span, br, input, br]

I created a simple for loop that loops through all these elements and deletes each one of them from the DOM. (all the elements are in a <section>)

Here's the loop:

        for(element in videoTitlesElement.childNodes){
            if(!isNaN(element)){
                videoTitlesElement.removeChild(
                        videoTitlesElement.childNodes[element]);
            }
        }

But, by the end of the loop, the nodeList looks like this:

[h4, span, input, span, input, span, input, span, input]

not all elements got removed. Why?

Thanks.

When I load my page, a nodeList gets created, and it looks like this:

[text, h4, text, span, br, input, br, span, br, input, br, span, br, input, br, span, br, input, br]

I created a simple for loop that loops through all these elements and deletes each one of them from the DOM. (all the elements are in a <section>)

Here's the loop:

        for(element in videoTitlesElement.childNodes){
            if(!isNaN(element)){
                videoTitlesElement.removeChild(
                        videoTitlesElement.childNodes[element]);
            }
        }

But, by the end of the loop, the nodeList looks like this:

[h4, span, input, span, input, span, input, span, input]

not all elements got removed. Why?

Thanks.

• javascript
• for-loop
• for-in-loop
• nodelist

• 2 Because you are modifying the collection when looping through it. Let's say you have three elements in a collection [A, B, C]. A for..in loop will internally have an indexer to keep track of the current element. So the indexer is 0 at start which points to element A. Then you remove the first element and the second element, B, now bees the first. The indexer is now advanced and points to 1. Now the element at index 1, C, is removed. And as you might see the element at index 0, B, is untouched and skipped over. – Sani Huttunen Commented Sep 25, 2015 at 14:58
• Related: Strange behavior when iterating over HTMLCollection from getElementsByClassName. – Sebastian Simon Commented Nov 17, 2022 at 2:40

3 Answers 3

Two things. First, don't use for ... in when you're iterating through numeric indexes; use a plain for loop. Then you won't need that isNaN() check, and it's generally safer.

The second problem is that when you remove a child, you change the length of the list. If you remove child 0, then the child that used to be child 1 bees child 0. Thus, what you really want is a simple while loop:

while (videoTitlesElement.childNodes.length)
  videoTitlesElement.removeChild(videoTitlesElement.childNodes[0]);

or, simpler:

while (videoTitlesElement.firstChild)
  videoTitlesElement.removeChild(videoTitlesElement.firstChild);

I should also note (assuming you're working with an HTML DOM) that it's easier to clear out all the child nodes of an element by simply blasting it via .innerHTML:

videoTitlesElement.innerHTML = "";

The list being iterated over (videoTitlesElement.childNodes) is being mutated during iteration. Try iterating over a copy of the original list:

var children = [].slice.call(videoTitlesElement.childNodes);

for(element in children){
    if(!isNaN(element)){
         videoTitlesElement.removeChild(videoTitlesElement.childNodes[element]);
    }
}

If you look at your results, you'll note that you're skipping every second item.

If you imagine this as a for loop with an iterator, you're incrementing your iterator each time, but removing an item from the same collection before incrementing again. That means the item that was at index 1 when you first start the loop is at index 0 after you remove the first item in the array. So when you go to look at index 1 you've skipped over that element. This continues until the end of the loop, so you miss every second item.