使用 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>