Question

请参阅小提琴 - http://jsfiddle.net/fkwwyvz8/

x = document.getElementsByClassName("buddy_blocks");
for(i=0;i<x.length;i++)
    x[i].remove();

点击最后一个按钮，它必须删除所有其他按钮，但它不会，只删除其中一些，不知道为什么？还有什么方法可以删除所有这些按钮？

Answer 1

由于您的代码中似乎已经有了jQuery，您可以使用它来删除所有按钮：

$(".buddy_blocks").remove();

你的尝试不起作用有两个原因：

document.getElementsByClassName()返回一个动态nodeList，每当你删除一个导致你错过迭代元素的元素时，它会在你下面发生变化。
因为DOM元素没有.remove()方法（在大多数浏览器中无论如何 - 它是一种提议的方法，但还没有广泛使用）。父母可以使用.removeChild()方法代替。

在普通的Javascript中，您可以向后设置迭代，这样当您删除元素时，当这会导致动态HTMLCollection发生更改时，它不会弄乱您的迭代，因为更改将是您已经传递的元素。并切换为使用.removeChild()，如下所示：

function f() {
    var x = document.getElementsByClassName("buddy_blocks");
    for(var i = x.length - 1; i >= 0; i--) {
        x[i].parentNode.removeChild(x[i]);
    }
}

另外，请对函数本地的所有变量使用var，这样就不会产生意外的全局变量＆＃34;这将导致很难在将来的某个时间找出错误。

Answer 2

迭代数组并修改它时，从最后一个索引处开始，以避免在删除项目时对当前索引位置产生副作用

$("#c").click(function() {
  f();
});

function f() {
  x = document.getElementsByClassName("buddy_blocks");
  for(i=x.length-1;i>=0;i--)
    x[i].remove();
}

Answer 3

使用类'buddy_blocks'删除所有元素的jQuery方法：

$(".buddy_blocks").remove();

fiddle

普通的javascript方式：

var elems = document.getElementsByClassName('buddy_blocks'),
    elem;
while(elems.length){
    elem = elems.item(0);
    elem.parentNode.removeChild(elem);
}

fiddle

Answer 4

此类行为的原因是包含DOM元素的变量“x”指向实时DOM元素。因此，每次删除一个元素时，“x”都会保留新的DOM结构。所以我们需要使用下面的while循环并继续从DOM中删除第一个孩子。

$("#c").click(function() {
  f();
});
function f() {
   x = document.getElementsByClassName("buddy_blocks");
//for(i=0;i<x.length;i++)
//x[i].remove();
    var i = 0;
    while(x.length) {
     x[0].remove();
        i++;
    }
}

Answer 5

你正在向前循环元素。

x = document.getElementsByClassName("buddy_blocks");
for(i=0;i<x.length;i++)
    x[i].remove();

x是NodeList而不是数组。它是对与该类的元素匹配的当前元素的实时视图。因此，当您删除第一个项目时，第一个项目不在列表中，第二个项目现在是第一个项目。但是，你已经转到了第三项，但是新的第二项。

最终结果是你只删除了一半的元素。

考虑这个：

//remove the first item from the NodeList until there is nothing left
x = document.getElementsByClassName("buddy_blocks");
while(x.length > 0) {
    x[0].remove();
}

或：

//remove from the end of the list, which won't cause other elements to change position
x = document.getElementsByClassName("buddy_blocks");
for(i=x.length-1;i>=0;i--) {
    x[i].remove();
}

Javascript删除不删除所有元素

5 个答案: