如何从 DOM 中删除某个类的所有元素?

IT技术 javascript
2021-02-17 06:08:10

var paras = document.getElementsByClassName('hi');

for (var i = 0; i < paras.length; i++) {
  paras[i].style.color = '#ff0011';
  // $('.hi').remove();
}
<p class="hi">dood</p>
<p class="hi">dood</p>
<p class="hi">dood</p>
<p class="hi">dood</p>
<p class="hi">dood</p>
<p>not class 'hi'</p>

在jQuery中,这将是非常容易的:$('.hi').remove();我想学习 JS,然后 jQuery。

我被卡住了,谷歌没有提供。我不想成为复制/粘贴 jQuery 程序员。我刚刚开始学习JS。谢谢。

4个回答

要删除元素,请执行以下操作:

el.parentNode.removeChild(el);

MDN 是一个很好的参考。以下是一些相关页面:

节点
parentNode
removeChild

但是,如果您像这样循环,则会遇到问题,因为getElementsByClassName返回一个实时列表,当您删除节点时,元素也会从列表中删除,因此您不应增加,否则最终会跳过所有其他元素。而是不断地删除列表中的第一个元素,直到没有第一个元素:

var paras = document.getElementsByClassName('hi');

while(paras[0]) {
    paras[0].parentNode.removeChild(paras[0]);
}​

IMO jQuery 非常擅长向您展示在 Javascript 中可以做什么。我实际上建议您在学习 jQuery 大约一两个星期后,学习 jQuery,熟练掌握它,并记住它抽象出来的东西。有一天,当您对使用 jQuery 时可以获得的 Javascript 范围、对象等有很好的掌握时,请回过头来尝试学习如何在没有库的情况下更好地与 DOM 交互。这样你就可以更轻松地学习普通的 JS,并且你会欣赏库可以为你提供的更多抽象,同时学习当你只需要库提供的一两件事时,你可以自己编写它们,而无需包括整个图书馆。

简单的 ES6 答案:

document.querySelectorAll('.classname').forEach(e => e.remove());

解释:

  1. document.querySelectorAll()循环遍历文档中的元素,返回具有指定选择器(例如, , 的所有元素NodeList'.class''#id''button'
  2. forEach() 循环遍历 NodeList 并对每个元素执行指定的动作
  3. e => e.remove() 从 DOM 中移除元素

但是请注意,Internet Explorer 不支持此解决方案再说一次,什么都不是。

真的很喜欢这个。如果你非常需要 IE 支持,你可以做一些类似的事情:document.querySelectorAll('.classname').forEach(e => e.parentNode.removeChild(e));避免 polyfills 等......
2021-04-23 06:08:10
[].forEach.call(document.querySelectorAll('.hi'),function(e){
  e.parentNode.removeChild(e);
});

在这里,我使用Array.prototype.forEach轻松遍历类数组对象中的所有元素,即由 返回的静态 NodeList querySelectorAll,然后使用removeChild()从 DOM 中删除项目。

对于不支持querySelectorAll()或的旧浏览器forEach()

var classMatcher = /(?:^|\s)hi(?:\s|$)/;
var els = document.getElementsByTagName('*');
for (var i=els.length;i--;){
  if (classMatcher.test(els[i].className)){
    els[i].parentNode.removeChild(els[i]);
  }
}

请注意,因为getElementsByTagName返回一个活动的NodeList,所以您必须从后到前迭代这些项目,同时将它们从 DOM 中删除。

还有一些旧浏览器不支持querySelectorAll但支持getElementsByClassName,您可以使用它们来提高性能并减少代码。

@RobG 预防措施是什么?避孕套?:p 它适用于所有现代浏览器,并且(目前)事实上的标准行为可能会继续支持向后兼容,忍受像我这样曾经依赖它的傻瓜。
2021-04-24 06:08:10
不幸的是,“现代”浏览器是正在使用的浏览器的一个子集。在大多数情况下,“现代”被定义为“使用我的代码时不会损坏的浏览器”。但是在 quirks 模式下的 IE 8 至少没有 qSA,即使在标准模式下,如果将宿主对象传递给内置方法也会抛出错误。IE 8 被大约 50% 的 IE 用户使用,所以它可能不是“现代”的,但如果你想为一般的 web 编写健壮的代码,它不能被忽略。
2021-04-24 06:08:10
不要在不采取预防措施的情况下在宿主对象上调用本机方法,它们不需要支持,并且在某些浏览器中不支持。
2021-05-09 06:08:10
@RobG 感谢您提供详细信息。
2021-05-14 06:08:10

Afaik 只有父级才能在原生 JS 中删除子级。因此,您首先必须获得该元素的父级,然后使用父级删除该元素。试试这个:

var parent = paras[i].parentNode;
parent.removeChild(paras[i]);