如何使用JavaScript刪除HTML中的子節點？

Question

有沒有像document.getElementById("FirstDiv").clear()這樣的功能？

Answer 1

要回答原來的問題刪除你的節點上設置任何事件處理程序 - 有多種方法可以做到這一點，但以下將是最簡單的。

如果您已經有一個句柄，你要刪除的子節點，即必須持有對它的引用一個JavaScript變量：

myChildNode.parentNode.removeChild(myChildNode); 

顯然，如果你不使用的一個已經做了許多庫，你想創建一個函數來抽象了這一點：

function removeElement(node) { 
    node.parentNode.removeChild(node); 
} 

---

編輯：由於已被他人提及：如果您有任何事件處理程序連接好對於要刪除的節點，在刪除節點的最後一個引用超出範圍之前，您需要確保斷開連接，以免JavaScript解釋器的糟糕實現泄漏內存。

Answer 2

您應該能夠使用節點的.RemoveNode方法或父節點的.RemoveChild方法。

Answer 3

如果你想清除div和刪除所有子節點，你可以把：

var mydiv = document.getElementById('FirstDiv'); 
while(mydiv.firstChild) { 
    mydiv.removeChild(mydiv.firstChild); 
} 

Answer 4

你應該使用一個JavaScript庫做這樣的事情。

例如，MochiKit具有功能removeElement，而jQuery具有remove。

Answer 5

你可以將其取出，以避免內存泄漏在IE

Answer 6

一個jQuery的解決方案

HTML

<select id="foo"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select> 

的Javascript

// remove child "option" element with a "value" attribute equal to "2" 
$("#foo > option[value='2']").remove(); 

// remove all child "option" elements 
$("#foo > option").remove(); 

參考文獻：

Attribute Equals Selector [name=value]

選擇具有與值 恰好等於一定值時 指定的屬性的元素。

Child Selector (「parent > child」)

選擇所有直接子元素 通過元素的 「小孩」 由 「父」 規定指定

.remove()

到.empty類似（ ），.remove（） 方法從DOM中取出元素。 我們使用.remove（）當我們想要 刪除元素本身，以及 裏面的一切。除了 元素本身，所有綁定的事件和與 關聯的jQuery數據之外，元素都被刪除。

Answer 7

使用下面的代碼：

//for Internet Explorer 
document.getElementById("FirstDiv").removeNode(true); 

//for other browsers 
var fDiv = document.getElementById("FirstDiv"); 
fDiv.removeChild(fDiv.childNodes[0]); //first check on which node your required node exists, if it is on [0] use this, otherwise use where it exists. 

Answer 8

targetNode.remove（）

這是由W3C推薦爲2015年年底，並香草JS。比以前的方法更好/更乾淨。

對於你的使用情況：

document.getElementById("FirstDiv").remove(); 

如果您需要填充工具以確保向後兼容性：

if (!('remove' in Element.prototype)) { 
    Element.prototype.remove = function() { 
     if (this.parentNode) { 
      this.parentNode.removeChild(this); 
     } 
    }; 
} 

Answer 9

var p=document.getElementById('childId').parentNode; 
    var c=document.getElementById('childId'); 
    p.removeChild(c); 
    alert('Deleted'); 

p是父節點和c的子節點
parentNode是包含父親參考的JavaScript變量

容易理解