CODEWITHSUNDEEP
javascripthtml
Mill3r
Mill3r

Reputation: 544

Remove by class name Javascript

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?

Upvotes: 0

Views: 775

Answers (1)

Anurag Awasthi
Anurag Awasthi

Reputation: 6223

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--;
        }
    } 
    }

Upvotes: 2

Related Questions