資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 JavaScript 中刪除 DOM 節點的所有子元素？
假設您正在構建一個管理日常任務資料的 Web 應用程式，使用者插入任務，並形成一個任務列表。但在某個時間點，使用者希望從列表中刪除所有任務，並希望使列表為空。因此，作為開發人員，您應該知道如何從DOM節點中刪除所有子元素。
要從 DOM 節點中刪除所有元素，我們有以下方法。
- 透過迭代 DOM 節點並使用 removeChild 方法。
- 透過將 innerHTML 值擦除為空字串。
- 透過使用 jQuery 的 empty() 方法。
- 使用 replaceChildren() 方法。
透過迭代 DOM 節點並使用 removeChild 方法
在這種方法中，我們將使用while迴圈或for迴圈迭代 DOM。在每次迭代中，我們將使用 nodeObject.hasChildNodes() 方法或 nodeObject.childElementCount 屬性檢查節點中是否還有剩餘的元素，如果節點中存在任何元素，我們只需使用 nodeObject.removeChild() 方法將其刪除，並將第一個節點作為引數傳遞。
語法
parentElement.hasChildNodes() parentElement.removeChild(parentElement.firstChild)
這裡parentElement.hasChildNodes()將檢查 DOM 節點中是否存在任何元素。parentElement.removeChild(parentElement.firstChild)刪除 DOM 節點的第一個子節點。
演算法
步驟 1 - 遍歷所有 DOM 節點。要遍歷所有節點，您可以使用任何迴圈，例如 for 或 while 迴圈。
步驟 2 - 在每次迭代中，我們檢查父節點中是否存在任何子節點。
步驟 3 - 如果存在任何子節點，我們使用 removeChild() 方法將其刪除。
示例 1
使用 reomveChild() 方法刪除所有子元素
在下面的示例中，我們使用 removeChild() 方法刪除 DOM 節點的所有子元素。我們使用 while 迴圈迭代所有子節點。首先，我們使用 hasChildNodes() 方法檢查子元素是否存在。
<!DOCTYPE html>
<html>
<head>
<title>Code Result</title>
</head>
<body>
<h2>Removing All Child Elements using removeChild() Method </h2>
<p> Click "Remove Child" to remove all child button elements. </p>
<button id="btn">Remove Child</button>
<br><br><br>
<div id="parent" style="border:1px solid; padding: 10px; display: inline;">
<button id="child">First</button>
<button id="child">Second</button>
<button id="child">Third</button>
<button id="child">Fourth</button>
</div>
<script>
let btn = document.getElementById("btn");
let parent = document.getElementById("parent")
btn.addEventListener("click", () => {
while (parent.hasChildNodes())
parent.removeChild(parent.firstChild)
}
);
</script>
</body>
</html>
示例 2
使用 nodeObject.remove() 方法刪除所有子元素
在下面的示例中，我們使用nodeObject.remove()方法刪除 DOM 節點的所有子元素。我們使用 while 迴圈迭代所有子節點。首先，我們使用 hasChildNodes() 方法檢查子元素是否存在。
<!DOCTYPE html>
<html>
<body>
<h2>Removing All Child Elements using remove() Method </h2>
<p> Click "Remove Child" to remove all child button elements. <p>
<button id="btn">Remove Child</button>
<br><br><br>
<div id="parent" style="border:1px solid; padding: 10px; display: inline;">
<button id="child">First</button>
<button id="child">Second</button>
<button id="child">Third</button>
<button id="child">Fourth</button>
</div>
<script>
let btn = document.getElementById("btn");
let parent = document.getElementById("parent")
btn.addEventListener("click", () => {
while (parent.hasChildNodes())
parent.firstChild.remove()
}
);
</script>
</body>
</html>
透過擦除 innerHTML 值
在這種方法中，我們將空字串或 null 分配給 object.innerHTML。雖然這種方法看起來很簡單，但也有一些缺點。第一個是，如果父元素內部有 SVG，它不會刪除該 SVG。第二個是，它被認為非常慢，因為當您將 null 或空字串分配給 innerHTML 時，DOM 會從表面移除，但瀏覽器會保留子元素，這會使整體效能變慢。
語法
parent.innerHTML = null or parent.innerHTML = ""
這裡parent是要從中刪除子元素的父 DOM 節點。
示例
<html>
<body>
<h2>Removing All Child Elements by assigning parent.innerHTML value to null</h2>
<p> Click "Remove Child" to remove all child button elements. <p>
<button id="btn">Remove Child</button>
<br><br><br>
<div id="parent" style="border:1px solid; padding: 10px; display: inline;">
<button id="child">First</button>
<button id="child">Second</button>
<button id="child">Third</button>
<button id="child">Fourth</button>
</div>
<script>
let btn = document.getElementById("btn");
let parent = document.getElementById("parent")
btn.addEventListener("click", () => {
parent.innerHTML = null
});
</script>
</body>
</html>
透過使用 jQuery 的 empty() 方法
jQuery 的 empty() 方法會刪除一組匹配元素的所有子節點。我們使用選擇出父 DOM 元素，並在其上應用 empty() 方法。
語法
$(parentNode).empty();
示例
<html>
<body>
<h2>Removing All Child Elements using jQuery’s empty() Method </h2>
<p> Click "Remove Child" to remove all child button elements. <p>
<button id="btn">Remove Child</button>
<br><br><br>
<div id="parent" style="border:1px solid; padding: 10px; display: inline;">
<button id="child">First</button>
<button id="child">Second</button>
<button id="child">Third</button>
<button id="child">Fourth</button>
</div>
<script>
let btn = document.getElementById("btn");
let parent = document.getElementById("parent")
btn.addEventListener("click", () => {
$("#parent").empty()
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>
</html>
透過使用 replaceChildren() 方法
replaceChildren()方法用於用一組新的元素替換 DOM 節點的舊元素。此方法將節點元素作為引數，並按與引數相同的順序替換 DOM 元素。如果您不輸入任何引數，則它只會將舊元素替換為 null，這意味著舊元素將被刪除。
語法
parentElement.replaceElement();
這裡parentElement是要從中刪除子元素的 DOM 節點。
示例
<html>
<body>
<h2>Removing All Child Elements using replaceElement() Method </h2>
<p> Click "Remove Child" to remove all child button elements. <p>
<button id="btn">Remove Child</button>
<br><br><br>
<div id="parent" style="border:1px solid; padding: 10px; display: inline;">
<button id="child">First</button>
<button id="child">Second</button>
<button id="child">Third</button>
<button id="child">Fourth</button>
</div>
<script>
let btn = document.getElementById("btn");
let parent = document.getElementById("parent")
btn.addEventListener("click", () => {
parent.replaceChildren()
});
</script>
</body>
</html>
我們討論了四種在 JavaScript 中刪除 DOM 節點所有子元素的方法。您可以根據需要使用其中任何一種。我們建議您使用第一種方法或第四種方法。如果您使用 jQuery，則使用第三種方法，我們不建議您在構建複雜 UI 時使用第二種方法，因為它會使網頁變慢。
12K+ 瀏覽量
