Question

jQuery中.remove()的JS替代品是什么？我有$("[data-holder=container]").remove()，但需要将其转移到纯JS。

我知道如果我正在使用列表，例如，我可以使用.removeChild()，但事实并非如此。

console.log("starting script");

var container = document.querySelector("[data-holder=container]");

if (container.innerHTML.length == 0) {
  container.remove();
  console.log("empty elements removed");
}

body, p {
  margin: 0;
}
p {
  padding: 1em;
}
p:nth-child(even) {
  background: #669;
  color: #ccf;
}
p:nth-child(odd) {
  background: #acf;
}

<p data-holder="container">
  hello world
</p>
<p data-holder="container"></p>
<p data-holder="container"></p>
<p data-holder="container">dont this one</p>
<p data-holder="container"></p>

Answer 1

如果要删除任何DOM元素，可以引用它的父元素并将其删除。在您的情况下，当您使用querySelector时，它将仅返回第一个P标记而不是所有具有指定属性的P标记

您可以使用

从选择器中删除第一个元素

container.parentNode.removeChild(container);

但是，如果您要删除所有代码，请使用以下代码

var containers = document.querySelectorAll("[data-holder=container]");
for(var i=0;i < containers.length; i++){
 if (containers[i].innerHTML.length == 0) {
 containers[i].parentNode.removeChild(containers[i]);
 console.log("empty elements removed");
 }
}

Answer 2

扩展Ganesh More的答案和JaromandaX的评论：

使用querySelectorAll返回所有匹配的 DOM元素
使用parentNode.removeChild删除元素

console.log("starting script");

var container = document.querySelectorAll("[data-holder=container]");

for (var i=0;i<container.length;i++)
  if (container[i].innerHTML.length == 0)
    container[i].parentNode.removeChild(container[i]);

console.log("empty elements removed");

body, p {
  margin: 0;
}
p {
  padding: 1em;
}
p:nth-child(even) {
  background: #669;
  color: #ccf;
}
p:nth-child(odd) {
  background: #acf;
}

<p data-holder="container">
  hello world
</p>
<p data-holder="container"></p>
<p data-holder="container"></p>
<p data-holder="container">dont this one</p>
<p data-holder="container"></p>

Answer 3

如果您要删除所有符合特定条件的元素，只需

使用JavaScript querySelectorAll()方法

使用数组forEach()方法（首选项）遍历每个匹配的节点

通过匹配的节点使用parentNode并将其删除。

从您的代码中查看下面的代码片段。

HTML

<p data-holder="container">
  hello world
</p>
<p data-holder="container"></p>
<p data-holder="container"></p>
<p data-holder="container">dont this one</p>
<p data-holder="container"></p>

CSS

body, p {
  margin: 0;
}
p {
  padding: 1em;
}
p:nth-child(even) {
  background: #669;
  color: #ccf;
}
p:nth-child(odd) {
  background: #acf;
}

console.log("starting script");

var container = document.querySelectorAll("[data-holder=container]");

container.forEach((item) => {
  item.parentNode.removeChild(item);
});

Answer 4

.remove()是纯JavaScript方法...

然后.querySelectorAll()选择元素，然后.forEach()遍历它们。

<p data-holder="container">
  hello world
</p>
<p data-holder="container"></p>
<p data-holder="container"></p>
<p data-holder="container">dont this one</p>
<p data-holder="container"></p>

counter=counter

纯JavaScript替代jQuery的.remove（）

4 个答案:

HTML

CSS