Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

removechild loop exits before finish

Tags:

javascript

dom

I have the following piece of code that finds all elements in the document with classname foo and then removes them all

        function(doc) {
            var items = doc.getElementsByClassName('foo');
            alert(items.length);
            if(items.length>0) {
                for(var i=0;i<items.length;i++) {
                    alert(i);
                    doc.body.removeChild(items[i]);
                }
        }

Forexample, the items.length is 3 and the function exits after running one loop and when the length is 8 it exits at 3. Any help would be greatly appreciated. Also, when I run the function again and again it does eventually remove all elements.

like image 884
ama2 Avatar asked Nov 30 '22 05:11

ama2


1 Answers

Your problem is that the NodeList returned by getElementsByClassName() is live. Either convert it into an array first as Felix suggests or iterate backwards:

var items = doc.getElementsByClassName('foo');
var i = items.length;
while (i--) {
    items[i].parentNode.removeChild(items[i]);
}

This works because the item removed from the list each iteration is the last item in the list, therefore not affecting earlier items.

I also changed doc.body to items[i].parentNode for greater generality, in case you need to deal with elements that are not direct children of the <body> element.

like image 181
Tim Down Avatar answered Dec 04 '22 12:12

Tim Down