数据结构
网络
关系数据库管理系统 (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+ 次浏览
广告