按标签名删除元素

Question

可能重复的问题：
如何在多个元素上使用remove()?

我正在尝试删除所有标签名称为“label”的元素。我有以下代码。它在某种程度上起作用，但它只能删除一个标签。其他五个仍然存在。我该如何改变代码以删除所有“label”标签？

element = document.getElementsByTagName("label");
for (index = 0; index < element.length; index++) {
    element[index].parentNode.removeChild(element[index]);
}

- Daniel

Answer 1

var element = document.getElementsByTagName("label"), index;

for (index = element.length - 1; index >= 0; index--) {
    element[index].parentNode.removeChild(element[index]);
}

- Tomalak

---

我已经反转了计数器，因为如果你增加它，它永远不会停止 :-) - AlfonsoML

@Alfonso 感谢您的编辑，那当然是我实际想表达的意思。 :) - Tomalak

Answer 2

问题在于 document.getElementsByTagName() 返回的是一个 NodeList 而不是 Array。 NodeList 的内容和长度会在从DOM中删除位于 NodeList 中的元素时更新。因此，当你删除第一个元素时，NodeList 变短了，一个新的第一个元素占据了 index 0。在循环中更新 index 因此会导致你漏掉至少一个元素，具体取决于结果的长度。

尝试像这样做：

var elements = document.getElementsByTagName('label')
while (elements[0]) elements[0].parentNode.removeChild(elements[0])

- seliopou

---

+1 解释得非常好。比反向循环还要短。 - Tomalak

不是所有的NodeList都是实时更新的 :) - Florian Margaine

只是为了好玩：while (elem = elements.pop()) { elem.parentNode.removeChild(elem); }（当然，你应该先声明 elem） - Zirak

@florian-margaine你有好的参考链接可以提供吗？ - seliopou

@seliopou：https://developer.mozilla.org/zh-CN/docs/DOM/Document.querySelectorAll - jAndy

Answer 3

当您从文档中移除节点时，刚刚从 getElementsByTagName() 获取的节点列表也会更新以避免残留引用，因此您应该仅保留删除第一个节点，直到没有剩余节点为止。

var nodes = document.getElementsByTagName("label");

for (var i = 0, len = nodes.length; i != len; ++i) {
    nodes[0].parentNode.removeChild(nodes[0]);
}

在这里，nodes.length的值被缓存了；否则它会不断减少，最终你只会删除一半 :)

- Ja͢ck

Answer 4

“问题”在于.getElementsByTagName()返回一个实时的NodeList。因此，当您删除头（第一个）条目时，尾部会填充并向左“移动”，可以这么说。

这不是一个真正的JavaScript数组，在这种情况下它不能按预期工作。要创建这样一个“冻结的数组”，我们可以这样做。

var element = Array.prototype.slice.call(document.getElementsByTagName("label"),0); 

for (var index = 0, len = element.length; index < len; index++) {
    element[index].parentNode.removeChild(element[index]);
}

- jAndy

Answer 5

为什么不使用jQuery？这样就简单了。

$("label").remove();

- Rob