Remove by class name Javascript

Question

I am trying to remove all the elements from my page with a specific class name, but for some reason only the alternate class gets deleted.

The code pen link is here https://codepen.io/miller619/pen/WoVpdE

function prev(e) {
    'use strict';
    e.preventDefault();
    var getID = document.getElementById("zone");
    var removeXButtons = getID.getElementsByClassName("xbutton");
    for (var i = 0; i < removeXButtons.length; i++) {
        removeXButtons[i].parentNode.removeChild(removeXButtons[i]);
    }

}

<div id="zone">
  <input class="xbutton" name="xbtn" type="button" value="&times;">
  <input class="xbutton" name="xbtn" type="button" value="&times;">
  <input class="xbutton" name="xbtn" type="button" value="&times;">
</div>
<div id="pbtn" > <a href="#" class="btn btn-info btn-preview" onclick="prev(event)"><span class="glyphicon glyphicon-eye-open"></span> Delete all</a> </div>

Where am I going wrong?

Loop backwards instead of forwards. When you remove an element, the loop index of every element after it changes. — Blazemonger
– Blazemonger, Commented Jan 14, 2017 at 6:10
Because once you remove a child, the index of the remaining children also changes on each iteration. — asprin
– asprin, Commented Jan 14, 2017 at 6:12
Possible duplicate of Removing HTMLCollection elements from the DOM — Sebastian Simon
– Sebastian Simon, Commented Jan 14, 2017 at 6:15

Anurag Awasthi · Accepted Answer · 2017-01-14 06:10:56Z

2

Just change the order of for loop and it'll work. Problem is as you remove an element from array, the order of element changes. Traversing the array backwards wont give you this problem.

function prev(e) {
    'use strict';
    e.preventDefault();
    var getID = document.getElementById("zone");
    var removeXButtons = getID.getElementsByClassName("xbutton");
    for (var i = removeXButtons.length-1; i >=0 ; i--) {
        removeXButtons[i].parentNode.removeChild(removeXButtons[i]);
    }
} 
}

If you want to loop forwards you can do this,

function prev(e) {
        'use strict';
        e.preventDefault();
        var getID = document.getElementById("zone");
        var removeXButtons = getID.getElementsByClassName("xbutton");
        for (var i = 0; i < removeXButtons.length-1 ; i++) {
            removeXButtons[i].parentNode.removeChild(removeXButtons[i]);
            i--;
        }
    } 
    }

answered Jan 14, 2017 at 6:10

Anurag Awasthi

6,2532 gold badges21 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jaromanda X Over a year ago

while(removeXButtons.length) removeXButtons[0].parentNode.removeChild(removeXButtons[0]);

Collectives™ on Stack Overflow

Remove by class name Javascript

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related