javascript - 通过类名 Javascript 删除

Question

我试图从页面中删除具有特定类名称的所有元素，但由于某种原因，只有备用类被删除。

代码笔链接在这里 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>

我哪里出错了？

Answer 1

只要改变 for 循环的顺序就可以了。问题是当您从数组中删除元素时，元素的顺序会发生变化。向后遍历数组不会给你带来这个问题。

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

如果你想向前循环，你可以这样做，

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