純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"); 
} 
}