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

时间:2013-11-18 09:29:05

标签: javascript html dom

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

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

并返回所有center元素的数组。我怎样才能删除所有这些元素?

来自Remove all child elements of a DOM node in JavaScriptJavaScript DOM remove element我知道我可以遍历els,找到每个元素的父级,然后删除该特定节点。但有没有其他方式由JavaScript提供。就像我们可以在jquery中执行$('center').remove()一样,它会删除所有带有center标记的元素。有什么类似于Javascript中的内容吗?

2 个答案:

答案 0 :(得分:8)

提到你仍然循环遍历元素(没有办法避免这种情况),你可以这样做:

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

DEMO:http://jsbin.com/OtOyUVE/1/edit

关于切片的一些注意事项:

document.getElementsByTagName不返回数组,它返回一个长度为的实时列表 属性。这就是为什么需要首先将其转换为数组(Array.prototype.slice为具有length属性的任何对象执行此操作。通过这样做,您可以消除列表存在的问题(在更改DOM时更新),并且还可以使其他数组函数工作(如forEach),这些函数具有更多功能的循环语法。

答案 1 :(得分:3)

  

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

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

  

“我如何删除所有这些元素?”

您必须循环浏览列表,一次删除一个,如您在问题中稍后提到的那样。如果您发现自己做了很多事情,请将循环封装在函数内部,这样您就不必重复它。

  

“我们可以在jquery中执行$('center').remove()并删除所有带有中心标记的元素。有什么类似于Javascript的内容吗?”

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