Javascript删除不删除所有元素

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();

您的尝试没有成功，原因有两个：

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所有打算作为函数本地变量的变量，这样您就不会创建“意外的全局变量”，这将导致将来某个时候很难找出错误。

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

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