使用 JavaScript 刪除所有子元素

Mehvish Ashiq 2023年1月30日 2022年5月10日
  1. 使用 JavaScript 刪除所有子元素
  2. 使用 innerHTML 屬性刪除 JavaScript 中的所有子元素
  3. 使用 textContent 屬性刪除 JavaScript 中的所有子元素
  4. 使用 removeChild() 方法刪除 JavaScript 中的所有子元素
  5. 使用 remove() 函式刪除 JavaScript 中的所有子元素
  6. 使用 replaceChildren() 函式刪除 JavaScript 中的所有子元素
  7. 使用 jQuery 的 empty() 方法刪除 JavaScript 中的所有子元素
使用 JavaScript 刪除所有子元素

本文旨在學習使用 JavaScript 刪除所有子元素的不同方法。

這些不同的方法包括 innerHTMLtextContentremoveChild()remove()replaceChildren()、jQuery 的 empty() 方法和迴圈刪除子節點。

使用 JavaScript 刪除所有子元素

最簡單的過程之一是 innerHTML 屬性用於設定或返回 HTML 元素的內容,而 textContent 屬性設定或返回所選節點及其子節點的文字內容。

考慮 MDN 文件,我們可以說 textContentinnerHTML 更快,因為瀏覽器不呼叫 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>
Mehvish Ashiq avatar Mehvish Ashiq avatar

Mehvish Ashiq is a former Java Programmer and a Data Science enthusiast who leverages her expertise to help others to learn and grow by creating interesting, useful, and reader-friendly content in Computer Programming, Data Science, and Technology.

LinkedIn GitHub Facebook