Question

HTML：

<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>

我到目前为止的JS：

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

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

在jQuery中，这太简单了。（$('.hi').remove();）。我想学习JS，然后学习jQuery。

我陷入了困境，谷歌没有提供。我不想成为复制/粘贴jQuery程序员。我刚开始学习JS。感谢。

Answer 1

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

el.parentNode.removeChild(el);

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

Node
parentNode
removeChild

但是，如果你这样循环就会遇到问题，因为getElementsByClassName返回一个实时列表，当你删除一个节点时，元素也会从列表中删除，所以你不应该增加或者你将结束跳过所有其他元素。而是只是不断删除列表中的第一个元素，直到没有第一个元素：

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

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

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

Answer 2

[].forEach.call(document.querySelectorAll('.hi'),function(e){
  e.parentNode.removeChild(e);
});

这里我使用Array.prototype.forEach轻松遍历类数组对象中的所有元素，即querySelectorAll返回的静态NodeList，然后使用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，您可以使用它来提高性能和减少代码。

Answer 3

简单的ES6答案：

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

说明：

document.querySelectorAll()循环浏览文档中的元素，并返回具有指定选择器（例如'.class'，'#id'，'button'的所有元素的NodeList）< / li>
forEach()遍历NodeList并为每个元素执行指定的操作
e => e.remove()从DOM中删除元素

但是请注意，this solution is not supported by every browser (namely IE)

Answer 4

Afaik只有父母才能删除原生JS中的孩子。因此，您首先必须获取父元素，然后使用父元素删除元素。试试这个：

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

使用JavaScript删除某个类的所有元素

4 个答案: