使用 JavaScript 刪除所有子元素
- 使用 JavaScript 刪除所有子元素
-
使用
innerHTML屬性刪除 JavaScript 中的所有子元素 -
使用
textContent屬性刪除 JavaScript 中的所有子元素 -
使用
removeChild()方法刪除 JavaScript 中的所有子元素 -
使用
remove()函式刪除 JavaScript 中的所有子元素 -
使用
replaceChildren()函式刪除 JavaScript 中的所有子元素 -
使用 jQuery 的
empty()方法刪除 JavaScript 中的所有子元素
本文旨在學習使用 JavaScript 刪除所有子元素的不同方法。
這些不同的方法包括 innerHTML、textContent、removeChild()、remove()、replaceChildren()、jQuery 的 empty() 方法和迴圈刪除子節點。
使用 JavaScript 刪除所有子元素
最簡單的過程之一是 innerHTML 屬性用於設定或返回 HTML 元素的內容，而 textContent 屬性設定或返回所選節點及其子節點的文字內容。
考慮 MDN 文件，我們可以說 textContent 比 innerHTML 更快，因為瀏覽器不呼叫 HTML 解析器並快速替換所有子項。
remove() 函式從 DOM 中刪除特定元素，而 removeChild() 方法從文件物件模型 (DOM) 中刪除子元素（也稱為子節點）並返回刪除的元素/節點。如果孩子是 null，它會給出 TypeError。
另一方面，replaceChildren() 函式刪除節點的所有子節點；它還設定了一個新的子節點陣列（如果需要）。
你可以在此處找到有關它的更多詳細資訊。
我們的 HTML 啟動程式碼中有兩個子/節點；這就是我們使用 replaceChildren() 函式的原因；如果要替換一個子節點，也可以使用 replaceChild()。
replaceChild() 獲取要替換的舊節點和新節點。jQuery 的 empty() 函式從特定元素中刪除內容和所有子節點。
HTML 程式碼保持不變（除了最後一個示例，你必須在 <head> 標記中包含 jQuery 庫），但每個示例的 JavaScript 都會更改。
HTML 程式碼：
<!DOCTYPE html>
<html>
<head>
<title>Remove Child Nodes</title>
</head>
<body>
<div id="parentDiv">
<span>
<p>this is a paragraph inside the span tag.</p>
</span>
</div>
<button id="btn" onclick="removeChildElement()">
Remove Child Elements
</button>
</body>
</html>
使用 innerHTML 屬性刪除 JavaScript 中的所有子元素
以下程式碼使用 innerHTML 屬性刪除所有子節點。
function removeChildElement() {
document.getElementById('parentDiv').innerHTML = '';
}
使用 textContent 屬性刪除 JavaScript 中的所有子元素
該程式碼使用 textContent 屬性刪除所有子元素。
function removeChildElement() {
document.getElementById('parentDiv').textContent = '';
}
使用 removeChild() 方法刪除 JavaScript 中的所有子元素
使用帶有迴圈功能的 removeChild()，刪除子節點。如果你單擊 id 值為 btn 的按鈕，此 JavaScript 程式碼將被執行。
請參閱下面給出的程式碼示例。
btn.onclick = () => {
const element = document.getElementById('parentDiv');
while (element.firstChild) {
element.removeChild(element.lastChild);
}
}
使用 remove() 函式刪除 JavaScript 中的所有子元素
現在，在下面的程式碼中練習 remove() 函式。
function removeChildElement() {
const parent = document.getElementById('parentDiv')
while (parent.firstChild) {
parent.firstChild.remove()
}
}
使用 replaceChildren() 函式刪除 JavaScript 中的所有子元素
是時候學習使用 JavaScript 刪除所有子節點的 replaceChildren() 函式了。你可以看到下面給出的程式碼。
function removeChildElement() {
var element = document.getElementById('parentDiv');
element.replaceChildren();
}
使用 jQuery 的 empty() 方法刪除 JavaScript 中的所有子元素
如果你對 jQuery 感到滿意並正在尋找解決方案，你可以使用 empty() 方法。
function removeChildElement() {
$('#parentDiv').empty();
}
不要忘記在 HTML 程式碼的 <head> 標記中包含 jQuery 庫。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
