Removing HTML elements in a NodeList with JavaScript
If you're not familiar with the inner workings of DOM and JavaScript, at first, this may seem somehwat confusing.
The Scenario
You have the following elements:
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
And now you want to remove them. Maybe you tried the following?
var spans = document.getElementsByTagName("span"),
l = spans.length;
for(var i = 0; i < l; i++) {
spans[i].parentNode.removeChild(spans[i]);
}
The Problem
If you did, you probably failed, why? Because when you remove a element from the DOM, any reference to this element previously stored in a NodeList is also removed.
When the forloop reaches the 3:rd iteration there are only 2 items left in the spans NodeList and hence spans[3] is all of a sudden == undefined.
The Solution
The solution is simply to iterate through the NodeList backwards.
while(l--) {
spans[l].parentNode.removeChild(spans[l]);
}
By doing this, you'll safely remove all span elements from the document