在 Javascript 中删除所有具有特定标签名称的 DOM 元素

Question

如何使用 Javascript 删除所有具有特定标签名称的元素。例如，我做了以下事情：

var els = document.getElementsByTagName("center");

并返回所有

center

元素的数组。我怎样才能删除所有这些元素？

来自 Remove all child elements of a DOM node in JavaScript 和 JavaScript DOM remove element 我知道我可以遍历

els

，找到每个元素的父元素，然后删除该特定节点。但是javascript是否提供了其他方式。就像我们可以在 jquery 中执行

$('center').remove()

一样，它会删除所有带有

center

标签的元素。与 Javascript 中的类似吗？

Answer 1

提到你仍然循环遍历元素（没有办法避免这种情况），你可以这样做：

Array.prototype.slice.call(document.getElementsByTagName('center')).forEach(
  function(item) {
    item.remove();
    // or item.parentNode.removeChild(item); for older browsers (Edge-)
});

演示：http://jsbin.com/OtOyUVE/1/edit

切片的一些注意事项：

document.getElementsByTagName

不返回数组，它返回一个长度为 live 的列表 财产。这就是为什么需要先将其转换为数组的原因（

Array.prototype.slice

对具有

length

属性的任何对象执行此操作）。通过这样做，您可以消除列表处于活动状态的问题（当您更改 DOM 时得到更新）并且您还可以使用其他数组函数（如

forEach

），它们具有更实用的循环语法。

Answer 2

“它返回了一个包含所有中心元素的数组。”

好吧，它返回了一个类似数组的对象（一个 live NodeList 或一个 HTMLCollection，具体取决于浏览器）。

“我怎样才能删除所有这些元素？”

您必须遍历列表，一次一个地删除它们，正如您稍后在问题中提到的那样。如果您发现自己经常这样做，请将循环封装在一个函数中，这样您就不必重复它。

“我们可以在 jquery 中执行

$('center').remove()

，它会删除所有带有中心标记的元素。与 Javascript 中的类似吗？”

jQuery 是 JavaScript 函数的集合，所以它能做 JavaScript 做不到的事情。 jQuery 的

.remove()

方法（像大多数其他 jQuery 方法一样）将在内部循环，它只是让您不必考虑它。所以回到我上面已经提到的，将循环/删除代码封装在一个函数中，以便您可以从代码的任何部分使用它。