使用 JavaScript 删除所有子元素
本文旨在学习使用 JavaScript 删除所有子元素的不同方法。
这些不同的方法包括 innerHTML、textContent、removeChild()、remove()、replaceChildren()、jQuery 的 empty() 方法和循环删除子节点。
使用 JavaScript 删除所有子元素
最简单的过程之一是 innerHTML 属性用于设置或返回 HTML 元素的内容，而 textContent 属性设置或返回所选节点及其子节点的文本内容。
考虑 MDN 文档，我们可以说 textContent 比 innerHTML 更快，因为浏览器不调用 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>
