<div class=“box”>1</div>
 <div class=“box”>2</div>
<div class=“box”>3</div>

Let’s say I want to output the innerHTML value, and then delete each box from the DOM.

with getElementsByClassName, we can easily do:

var boxes = document.getElementsByClassName(‘box’);
for(var i=0; i<boxes.length; i++) {
console.log(boxes[i].innerHTML);
boxes[i].parentNode.removeChild(boxes[i]);
}

Gotcha! This, sadly, will not work. The output:

1
3
ERROR

The reason is that when boxes[0] (first box) is deleted, that node is also deleted from from the variable boxes. So, the first element of boxes is now the second box.

Now, since the array auto-updates itself, the way to do this is:

while(boxes.length) {
console.log(boxes[0].innerHTML);
boxes[0].parentNode.removeChild(boxes[0]);
}