无法删除所有子节点

Question

I want to remove all childNodes with class="child" from their parentNode, but only odd sequence is removed. How can I remove all elements with class="child" in native javascript and why only odd sequence is removed?

 var child = document.getElementsByClassName("child"); function remove(){ for (var i=0; i<child.length; i++) { child[i].parentNode.removeChild(child[i]); } } document.getElementById("del").onclick = remove;

 <div> <div class="child"> Child 1 </div> <div class="child"> Child 2 </div> <div class="child"> Child 3 </div> <div class="child"> Child 4 </div> </div> <br/> <div> <div class="child"> Child 5 </div> <div class="child"> Child 6 </div> </div> <button id="del">Remove Child</button>

Answer 1

getElementsByClassName() returns a NodeList, which is an array-like object that presents a live view of the results.

As you remove the class from those elements, the elements are removed from the NodeList.

When you remove the class from child[0] , child shrinks, and child[0] becomes the next element.

There are a number of ways to fix this:

• Copy the NodeList to an array so that it doesn't change underneath you (eg, child = Array.prototype.slice.call(child) )

• Loop backwards so you aren't affected by the changing indices

• Always remove the class from child[0] until the NodeList is empty.

Answer 2

Prefer using querySelector

var children = document.querySelectorAll('div .child');
for (var i = 0; i < children.length; i++)
    children[i].parentNode.removeChild(children[i]);

Answer 3

Simple and clean ...

 var child = document.getElementsByClassName("child"); function remove(){ var l = child.length; for (var i=0; i<l; i++) { child[0].parentNode.removeChild(child[0]); } } document.getElementById("del").onclick = remove;

 <div class="child"> Child 1 </div> <div class="child"> Child 2 </div> <div class="child"> Child 3 </div> <div class="child"> Child 4 </div> </div> <br/> <div> <div class="child"> Child 5 </div> <div class="child"> Child 6 </div> </div> <button id="del">Remove Child</button>

Answer 4

One has dynamic changed in DOM tree,another one doesn't.

 function querySelectorDelete(){ var box2 = document.querySelector("#box1").querySelectorAll(".box2"); Array.prototype.forEach.call(box2,function(el){ el.remove(); }) } function getElementsDelete(){ var box2 = document.getElementById("box1").getElementsByClassName("box2"); Array.prototype.forEach.call(box2,function(el){ el.remove(); }) }

 #box1{width:300px;height:300px;background:yellow;color:#fff;} .box2{width:50px;height:50px;background:red;margin:5px;} .box3{width:100px;height:100px;background:blue;margin:5px;}

 <div id="box1"> <div class="box2">first</div> <div class="box2">second</div> <div class="box2">third</div> <div class="box3"> <div class="box2">forth</div> </div> <button type="button" onclick="querySelectorDelete()">Delete Box2</button> <button type="button" onclick="getElementsDelete()">Delete Box2</button> </div>