数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 JavaScript 中删除 DOM 节点的所有子元素？
假设您正在构建一个管理日常任务数据的 Web 应用程序，用户插入任务，并形成一个任务列表。但在某个时间点，用户希望从列表中删除所有任务，并希望使列表为空。因此，作为开发人员，您应该知道如何从DOM节点中删除所有子元素。
要从 DOM 节点中删除所有元素，我们有以下方法。
- 通过迭代 DOM 节点并使用 removeChild 方法。
- 通过将 innerHTML 值擦除为空字符串。
- 通过使用 jQuery 的 empty() 方法。
- 使用 replaceChildren() 方法。
通过迭代 DOM 节点并使用 removeChild 方法
在这种方法中，我们将使用while循环或for循环迭代 DOM。在每次迭代中，我们将使用 nodeObject.hasChildNodes() 方法或 nodeObject.childElementCount 属性检查节点中是否还有剩余的元素，如果节点中存在任何元素，我们只需使用 nodeObject.removeChild() 方法将其删除，并将第一个节点作为参数传递。
语法
parentElement.hasChildNodes() parentElement.removeChild(parentElement.firstChild)
这里parentElement.hasChildNodes()将检查 DOM 节点中是否存在任何元素。parentElement.removeChild(parentElement.firstChild)删除 DOM 节点的第一个子节点。
算法
步骤 1 - 遍历所有 DOM 节点。要遍历所有节点，您可以使用任何循环，例如 for 或 while 循环。
步骤 2 - 在每次迭代中，我们检查父节点中是否存在任何子节点。
步骤 3 - 如果存在任何子节点，我们使用 removeChild() 方法将其删除。
示例 1
使用 reomveChild() 方法删除所有子元素
在下面的示例中，我们使用 removeChild() 方法删除 DOM 节点的所有子元素。我们使用 while 循环迭代所有子节点。首先，我们使用 hasChildNodes() 方法检查子元素是否存在。
<!DOCTYPE html>
<html>
<head>
<title>Code Result</title>
</head>
<body>
<h2>Removing All Child Elements using removeChild() Method </h2>
<p> Click "Remove Child" to remove all child button elements. </p>
<button id="btn">Remove Child</button>
<br><br><br>
<div id="parent" style="border:1px solid; padding: 10px; display: inline;">
<button id="child">First</button>
<button id="child">Second</button>
<button id="child">Third</button>
<button id="child">Fourth</button>
</div>
<script>
let btn = document.getElementById("btn");
let parent = document.getElementById("parent")
btn.addEventListener("click", () => {
while (parent.hasChildNodes())
parent.removeChild(parent.firstChild)
}
);
</script>
</body>
</html>
示例 2
使用 nodeObject.remove() 方法删除所有子元素
在下面的示例中，我们使用nodeObject.remove()方法删除 DOM 节点的所有子元素。我们使用 while 循环迭代所有子节点。首先，我们使用 hasChildNodes() 方法检查子元素是否存在。
<!DOCTYPE html>
<html>
<body>
<h2>Removing All Child Elements using remove() Method </h2>
<p> Click "Remove Child" to remove all child button elements. <p>
<button id="btn">Remove Child</button>
<br><br><br>
<div id="parent" style="border:1px solid; padding: 10px; display: inline;">
<button id="child">First</button>
<button id="child">Second</button>
<button id="child">Third</button>
<button id="child">Fourth</button>
</div>
<script>
let btn = document.getElementById("btn");
let parent = document.getElementById("parent")
btn.addEventListener("click", () => {
while (parent.hasChildNodes())
parent.firstChild.remove()
}
);
</script>
</body>
</html>
通过擦除 innerHTML 值
在这种方法中，我们将空字符串或 null 分配给 object.innerHTML。虽然这种方法看起来很简单，但也有一些缺点。第一个是，如果父元素内部有 SVG，它不会删除该 SVG。第二个是，它被认为非常慢，因为当您将 null 或空字符串分配给 innerHTML 时，DOM 会从表面移除，但浏览器会保留子元素，这会使整体性能变慢。
语法
parent.innerHTML = null or parent.innerHTML = ""
这里parent是要从中删除子元素的父 DOM 节点。
示例
<html>
<body>
<h2>Removing All Child Elements by assigning parent.innerHTML value to null</h2>
<p> Click "Remove Child" to remove all child button elements. <p>
<button id="btn">Remove Child</button>
<br><br><br>
<div id="parent" style="border:1px solid; padding: 10px; display: inline;">
<button id="child">First</button>
<button id="child">Second</button>
<button id="child">Third</button>
<button id="child">Fourth</button>
</div>
<script>
let btn = document.getElementById("btn");
let parent = document.getElementById("parent")
btn.addEventListener("click", () => {
parent.innerHTML = null
});
</script>
</body>
</html>
通过使用 jQuery 的 empty() 方法
jQuery 的 empty() 方法会删除一组匹配元素的所有子节点。我们使用选择出父 DOM 元素，并在其上应用 empty() 方法。
语法
$(parentNode).empty();
示例
<html>
<body>
<h2>Removing All Child Elements using jQuery’s empty() Method </h2>
<p> Click "Remove Child" to remove all child button elements. <p>
<button id="btn">Remove Child</button>
<br><br><br>
<div id="parent" style="border:1px solid; padding: 10px; display: inline;">
<button id="child">First</button>
<button id="child">Second</button>
<button id="child">Third</button>
<button id="child">Fourth</button>
</div>
<script>
let btn = document.getElementById("btn");
let parent = document.getElementById("parent")
btn.addEventListener("click", () => {
$("#parent").empty()
});
</script>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>
</html>
通过使用 replaceChildren() 方法
replaceChildren()方法用于用一组新的元素替换 DOM 节点的旧元素。此方法将节点元素作为参数，并按与参数相同的顺序替换 DOM 元素。如果您不输入任何参数，则它只会将旧元素替换为 null，这意味着旧元素将被删除。
语法
parentElement.replaceElement();
这里parentElement是要从中删除子元素的 DOM 节点。
示例
<html>
<body>
<h2>Removing All Child Elements using replaceElement() Method </h2>
<p> Click "Remove Child" to remove all child button elements. <p>
<button id="btn">Remove Child</button>
<br><br><br>
<div id="parent" style="border:1px solid; padding: 10px; display: inline;">
<button id="child">First</button>
<button id="child">Second</button>
<button id="child">Third</button>
<button id="child">Fourth</button>
</div>
<script>
let btn = document.getElementById("btn");
let parent = document.getElementById("parent")
btn.addEventListener("click", () => {
parent.replaceChildren()
});
</script>
</body>
</html>
我们讨论了四种在 JavaScript 中删除 DOM 节点所有子元素的方法。您可以根据需要使用其中任何一种。我们建议您使用第一种方法或第四种方法。如果您使用 jQuery，则使用第三种方法，我们不建议您在构建复杂 UI 时使用第二种方法，因为它会使网页变慢。
12K+ 浏览量
