纯jQuery替代jQuery的.remove（）

Question

什么是jQuery替代.remove() jQuery？我有$("[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

扩展在加尼甚更多的答案，并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 2

如果你想删除任何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"); 
} 
}