Javascript删除不删除所有元素

Question

请引用fiddle - 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();

<小时/>

您的尝试失败有两个原因:

1. document.getElementsByClassName() 返回一个动态的 nodeList，每次您删除一个元素时，它都会在您的下方发生变化，从而导致您在迭代中丢失元素
2. 因为 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 ，这样您就不会创建“意外的全局变量”，这将导致在某些时候很难找出错误 future 。

<小时/>

或者，在 2021 年起的现代浏览器中，您可以使用 document.querySelectorAll() (因为它不返回实时集合并且是可迭代的)，并且可以使用 .remove () 因为所有现代浏览器都支持它:

function f() {
    const items = document.querySelectorAll(".buddy_blocks");
    for (let item of items) {
         item.remove();
    }
}