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

Question

是否有像document.getElementById("FirstDiv").clear()這樣的函數？

Answer 1

要回答最初的問題 - 有多種方法可以做到這一點，但以下是最簡單的。

如果您已經有了要刪除的子節點的句柄，即您有一個包含對它的引用的 JavaScript 變量：

myChildNode.parentNode.removeChild(myChildNode);

顯然，如果您沒有使用已經執行此操作的眾多庫之一，您可能需要創建一個函數來抽象它：

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

---

編輯：正如其他人所提到的：如果您有任何事件處理程序連接到您要刪除的節點，您將需要確保在最后一次引用要刪除的節點超出范圍之前斷開這些處理程序，以免實施不當JavaScript 解釋器泄漏內存。

Answer 2

如果你想清除 div 並刪除所有子節點，你可以輸入：

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

Answer 3

現代解決方案 - child.remove()

對於您的用例：

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

這是 W3C 自 2015 年底以來推薦的，並且是vanilla JS 。 所有主流瀏覽器都支持它。

Mozilla 文檔

支持的瀏覽器- 96% 2020 年 5 月

Answer 4

在刪除節點之前，您必須刪除在節點上設置的任何事件處理程序，以避免 IE 中的內存泄漏

Answer 5

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();

參考：

屬性等於選擇器 [name=value]

選擇具有指定屬性且值恰好等於特定值的元素。

子選擇器（“父>子”）

選擇由“parent”指定的元素的“child”指定的所有直接子元素

。去掉（）

與 .empty() 類似，.remove() 方法將元素從 DOM 中取出。 當我們想要刪除元素本身以及其中的所有內容時，我們使用.remove()。 除了元素本身，所有與元素關聯的綁定事件和 jQuery 數據都被刪除。

Answer 6

使用以下代碼：

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

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

p是父節點，c是子節點
parentNode 是一個包含父引用的 JavaScript 變量

容易明白

Answer 8

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

Answer 9

您可能應該使用 JavaScript 庫來執行此類操作。

例如，MochiKit 有一個函數removeElement ，而 jQuery 有一個remove 。