jQuery 具有仅用于从另一个元素中删除子元素的功能。“empty()”方法可以直接在对象上使用。
考虑下面的 HTML 代码。
1<!DOCTYPE html>
2<html>
3<head>
4 <title>Lorem ipsum dolor sit amet</title>
5</head>
6<body>
7 <div id="myDiv">
8 <p>First paragraph</p>
9 <p>Second paragraph</p>
10 <p>Third paragraph</p>
11 <p>Fourth paragraph</p>
12 </div>
13 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
14</body>
15</html>
要删除“myDiv”元素中的所有段落，只需在 jQuery 中使用以下代码。
1$("#myDiv").empty();
但是我们如何只使用 JavaScript 来执行同样的操作呢？
使用 JavaScript 从 DOM 节点中删除子元素
JavaScript 允许程序员通过各种属性从 DOM 节点中删除元素。让我们学习如何使用它们中的每一个来进行此删除。
innerHTML
这些属性之一是“innerHTML”。它允许替换所有元素的内部 HTML。包括被一个空字符串替换，使有问题的元素为空。
要删除“myDiv”元素内的所有子节点，请使用以下 JavaScript。
1document.getElementById("myDiv").innerHTML = "";
您可以在下面看到一个完整的 HTML 示例。这里我们使用一个按钮来移除元素。
1<!DOCTYPE html>
2<html>
3<head>
4 <title>Removing HTML elements using innerHTML</title>
5 <meta charset="utf-8">
6</head>
7<body>
8 <div id="myDiv" style="border: 3px dashed red; margin-bottom: 20px;">
9 <p>First paragraph</p>
10 <p>Second paragraph</p>
11 <p>Third paragraph</p>
12 <p>Fourth paragraph</p>
13 </div>
14
15 <button id='removeElements'>Remove paragraphs (innerHTML)</button>
16
17 <script>
18 const button = document.getElementById("removeElements");
19 button.onclick = function () {
20 document.getElementById("myDiv").innerHTML = "";
21 };
22 </script>
23</body>
24</html>
textContent
“textContent”属性可用于将节点内的所有元素替换为空字符串。
根据浏览器的不同，使用“textContent”可能比“innerHTML”执行得更好。
1document.getElementById("myDiv").textContent = "";
使用循环删除子元素（“lastChild”）
在下面的示例中，我们使用“while”循环来检查我们的元素是否包含第一个子元素。如果为真，则表示父元素内至少有一个子元素，因此循环删除最后一个元素。并且重复该过程。
使用“lastChild”属性删除最后一个元素通常比使用“firstChild”属性删除第一个元素执行得更好。
1const element = document.getElementById("myDiv");
2while (element.firstChild) {
3 element.removeChild(element.lastChild);
4}
使用循环删除子元素（“lastElementChild”）
在这里，我们将获得相同的结果，但保留“非元素”，例如文本节点“#text”和注释“<!– comments –>”。
1const element = document.getElementById("myDiv");
2while (element.firstChild) {
3 element.removeChild(element.lastElementChild);
4}
“lastElementChild”的另一个特性是在父元素中保留不是直接后代的子节点。
例如，考虑以下元素的结构。
1Parent element
2|
3 — First node
4| |
5| — Node 1
6| |
7| — Node 2
8|
9 — Second node
使用“lastElementChild”时，“First node”和“Second node”将被删除。“Node 1”和“Node 2”不会被删除。
使用“remove”方法删除子元素
1const element = document.getElementById("myDiv");
2while (element.firstChild) {
3 element.lastChild.remove();
4}
ES5 中添加了“remove”功能。它具有更简单和更直接的链接语法。它已经在许多浏览器中得到了很好的支持 。
使用“replaceChildren”方法删除元素
还可以使用“replaceChildren”API 从 DOM 节点中删除子元素。此方法不仅允许您从父元素中删除元素，还可以在一次操作中将它们替换为其他元素。
要仅删除子元素，请在不带任何参数的情况下调用 API。
1const element = document.getElementById("myDiv");
2element.replaceChildren();
现代浏览器已经很好地支持 “replaceChildren”API 。