按类名Javascript删除 [英] 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.

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

我哪里错了？

推荐答案

只需更改for循环的顺序即可。问题是当你从数组中删除一个元素时，元素的顺序会发生变化。向后遍历数组不会给你这个问题。

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

这篇关于按类名Javascript删除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！