如何在 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 值:
在此方法中，我们为 object.innerHTML 分配一个空白字符串或 null。虽然这种方法看起来很简单，但也有一些缺点。第一个缺点是，如果父级内部有 SVG，它不会删除它。第二个缺点是，它被认为非常慢，因为当您为 innerHTML 分配一个 null 或空字符串时，DOM 会从表面移除，但浏览器会保留子元素，这会使整体性能变慢。
语法
parent.innerHTML = null 或 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.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>
</html>
使用 replaceChildren() 方法
replaceChildren() 方法用于将 DOM 节点的旧元素替换为一组较新的元素。此方法将节点元素作为参数，并以与参数相同的顺序替换 DOM 元素。如果您不输入任何参数，则它只会将旧元素替换为 null，这意味着旧元素将被删除。
语法
parentElement.replaceElement();
这里的 parentElement 是我们要从中删除 chid 元素的 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，我们不建议您使用第二种方法，因为它会使网页变慢。
