82 

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

4 回答 4

115

要删除元素，请执行以下操作：

el.parentNode.removeChild(el);

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

节点父节点
removeChild

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

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

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

IMO jQuery 非常擅长向您展示 Javascript 可以做什么。我实际上建议在大约一两个星期的普通 JS 之后学习 jQuery，精通它，并记住它抽象的内容。有一天，当您对 Javascript 作用域、对象以及在使用 jQuery 时可以获得的东西有了很好的掌握时，回去尝试学习如何在没有库的情况下更好地与 DOM 交互。这样，您将更轻松地学习纯 JS，并且您将欣赏库可以为您提供更多的抽象，同时了解当您只需要库提供的一两个东西时，您可以自己编写它们而无需包括整个图书馆。

于 2012-05-31T23:15:04.483 回答
71

简单的 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 不支持此解决方案。话又说回来，什么都没有。

于 2019-08-18T18:12:46.803 回答
18 
[].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，您可以使用它们来提高性能并减少代码。

于 2012-05-31T23:14:05.943 回答
1

Afaik 只有父母可以在本机 JS 中删除孩子。因此，您首先必须获得该元素的父元素，然后使用父元素删除该元素。尝试这个：

var parent = paras[i].parentNode;
parent.removeChild(paras[i]);
于 2012-05-31T23:13:50.690 回答