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

Question

如何使用Javascript删除具有特定标记名称的所有元素.例如,我做了以下事情:

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

它返回了所有center元素的数组.我该如何删除所有这些元素？

从即将删除JavaScript中的DOM节点的所有子元素和JavaScript的DOM元素删除我知道我可以遍历els,找到每个元素的父然后删除特定节点.但有没有其他方式由JavaScript提供.就像我们$('center').remove()在jquery中可以做的那样,它会删除带有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不返回数组,它返回一个带有length属性的实时列表.这就是为什么需要首先将其转换为数组(Array.prototype.slice对于具有该length属性的任何对象都这样做).通过这样做,您可以消除列表存在的问题(在更改DOM时更新),并且您还可以使用其他数组函数(例如forEach),这些函数具有更多功能的循环语法.

Answer 2

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

嗯，它返回一个类似数组的对象（一个实时NodeList 或一个 HTMLCollection，具体取决于浏览器）。

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

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

“我们可以$('center').remove()在 jquery 中做到这一点，它会删除所有带有中心标记的元素。有什么类似于 Javascript 中的吗？”

jQuery 是 JavaScript 函数的集合，因此它不能做 JavaScript 不能做的事情。jQuery 的.remove()方法（像大多数其他 jQuery 方法一样）将在内部循环，它只是让您不必考虑它。这又回到了我上面已经提到的，将循环/删除代码封装在一个函数中，以便您可以从代码的任何部分使用它。