資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學在 JavaScript 中刪除特定元素的子節點？
在本文中，我們將討論如何使用適當的示例在 JavaScript 中刪除特定元素的子節點。
要刪除特定元素的子節點，JavaScript 中存在一個名為 `removeChild()` 的方法。
`removeChild()` 方法與 `remove()` 方法不同。`remove()` 方法幫助我們刪除自身。而使用 `removeChild()` 方法，我們可以從父節點中刪除子節點。
現在，讓我們瞭解 `removeChild()` 屬性的語法和用法。
語法
`removeChild()` 方法的語法如下：
removeChild(childNode);
其中，`childNode` 是要刪除的節點。返回被移除的節點。
示例 1
這是一個使用 `removeChild()` 方法在 JavaScript 中刪除特定元素子節點的示例程式。
<!DOCTYPE html>
<html>
<head>
<title>Remove the child node of a specific element in JavaScript</title>
</head>
<body style="text-align: center;">
<h4>Remove the child node of a specific element in JavaScript using removeChild()</h4>
<p>List of Top Mobile Selling Companies</p>
<ul id="Mobiles">
<li id="m1">Samsung</li>
<li id="m2">One plus</li>
<li id="m3">Apple</li>
<li id="m4">Oppo</li>
</ul>
<p id="result"></p>
<script>
const list = document.getElementById('Mobiles'); // Select the list from which you want to delete an element
const ele = document.getElementById('m4'); // The element to be removed from the list
list.removeChild(ele);
list.removeChild(list.firstElementChild);
</script>
</body>
</html>
執行上述程式碼後，將生成以下輸出。
示例 2
這是一個使用 `removeChild()` 方法在 JavaScript 中刪除特定列表節點的示例程式，其中父節點未知。
<!DOCTYPE html>
<html>
<head>
<title>Remove the child node of a specific element in JavaScript</title>
</head>
<body style="text-align: center;">
<h4>Remove the child node of a specific element in JavaScript using removeChild() when the parent node is not known </h4>
<p>List of Top Mobile Selling Companies</p>
<ul id="Mobiles">
<li id="m1">Samsung</li>
<li id="m2">One plus</li>
<li id="m3">Apple</li>
<li id="m4">Oppo</li>
</ul>
<p id="result"></p>
<script>
const ele = document.getElementById('m3'); // The element to be removed from the list
if(ele.parentNode){
ele.parentNode.removeChild(ele);
}
</script>
</body>
</html>
執行上述程式碼後，將生成以下輸出。
示例 3
這是一個使用 `removeChild()` 方法刪除列表中所有節點的示例程式，其中每次刪除列表的第一個元素，直到列表為空。
<!DOCTYPE html>
<html>
<head>
<title>Remove the child node of a specific element in JavaScript</title>
</head>
<body style="text-align: center;">
<h4>Remove all the nodes in a list using removeChild() method.</h4>
<p>List of Top Mobile Selling Companies</p>
<ul id="Mobiles">
<li id="m1">Samsung</li>
<li id="m2">One plus</li>
<li id="m3">Apple</li>
<li id="m4">Oppo</li>
</ul>
<p id="result"></p>
<script>
const u_list = document.getElementById('Mobiles'); // The list to be pointed.
while(u_list.hasChildNodes()){
u_list.removeChild(u_list.firstChild); // Remove the first child of list everytime until the list is null.
}
</script>
</body>
</html>
執行上述程式碼後，將生成以下輸出。
示例 4
這是一個使用 `removeChild()` 方法刪除列表中所有節點的示例程式，其中每次刪除列表的最後一個元素，直到列表為空。
<!DOCTYPE html>
<html>
<head>
<title>Remove the child node of a specific element in JavaScript</title>
</head>
<body style="text-align: center;">
<h4>Remove all the nodes in a list using removeChild() method and lastElementChild property.</h4>
<p>List of Top Mobile Selling Companies</p>
<ul id="Mobiles">
<li id="m1">Samsung</li>
<li id="m2">One plus</li>
<li id="m3">Apple</li>
<li id="m4">Oppo</li>
</ul>
<script>
var u_list = document.getElementById('Mobiles'); // The list to be pointed.
var element = u_list.lastElementChild; // pointing the last element of the list.
while (element) {
u_list.removeChild(element); // Remove the last child of list everytime until the list is null.
element = u_list.lastElementChild;
}
</script>
</body>
</html>
執行上述程式碼後，將生成以下輸出。
更新於：2022-12-09
5K+ 次瀏覽
廣告