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
これらのプロパティの1つは「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」ループを使用して、要素に最初の子が含まれているかどうかを確認します。trueの場合、親要素内に少なくとも1つの子要素があることを示しているため、ループは最後の要素を削除します。そして、このプロセスが繰り返されます。
「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」のもう1つの機能は、直接の子孫ではない親要素内の子ノードを保持することです。
たとえば、以下の要素の構造を考えてみましょう。
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}
「remove」機能がES5に追加されました。これは、より単純でより直接的な連鎖構文を持っています。すでに多くのブラウザで優れたサポートを提供しています 。
「replaceChildren」メソッドを使用して要素を削除します
「replaceChildren」APIを使用してDOMノードから子要素を削除する可能性もあります。このメソッドを使用すると、親要素内から要素を削除できるだけでなく、1回の操作で他の要素に置き換えることもできます。
子要素を削除するには、引数なしでAPIを呼び出します。
1const element = document.getElementById("myDiv");
2element.replaceChildren();
「replaceChildren」APIは、最新のブラウザですでに十分にサポートされ ています 。