CODEWITHSUNDEEP
javascript
Agus Putra Dana
Agus Putra Dana

Reputation: 719

Can't remove all childNodes

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>

Upvotes: 2

Views: 126

Answers (4)

Hsinhsin Hung
Hsinhsin Hung

Reputation: 369

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>

Upvotes: 0

rafaelcastrocouto
rafaelcastrocouto

Reputation: 12151

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>

Upvotes: 0

monkeyinsight
monkeyinsight

Reputation: 4859

Prefer using querySelector

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

Upvotes: 2

SLaks
SLaks

Reputation: 887225

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.

Upvotes: 4

Related Questions