JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで2つの要素の間にあるすべての要素を削除する方法｜remove()メソッドの使い方

はじめに

Web開発では、特定の2つの要素の間に挟まれた不要な要素を一括で削除したい場面があります。本記事では、JavaScriptの remove() メソッドと nextElementSibling プロパティを組み合わせて、開始地点から終了地点までの要素を効率的に取り除く方法を解説します。

対象となるHTML構造

例として、以下のような要素が存在するケースを考えてみましょう。

<p>My Name is John</p>
<p>My Name is David</p>
<p>My Name is Bob</p>
<p>My Name is Mike</p>
<p>My Name is Carol</p>
<footer>END</footer>

ここでの目的は、<nav> 要素（START）と <footer> 要素（END）の間にある複数の <p> 要素とその内容をすべて削除することです。

remove()メソッドで要素を削除する仕組み

2つの要素の間にある要素をまとめて削除するには、remove() メソッドを利用します。remove() は、呼び出された要素をDOMツリーから直接取り外すことができる便利なメソッドです。

具体的な手順は次のとおりです。

  • document.querySelector() を使って、開始地点（<nav>）と終了地点（<footer>）の要素を取得する
  • while ループで、開始地点の直後の兄弟要素（nextElementSibling）が終了地点になるまで繰り返す
  • ループ内で該当する要素に対して remove() を呼び出し、順番に削除していく

コード例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<nav>START</nav>
<p>My Name is John</p>
<p>My Name is David</p>
<p>My Name is Bob</p>
<p>My Name is Mike</p>
<p>My Name is Carol</p>
<footer>END</footer>
<script>
const startingPoint = document.querySelector("nav");
const endingPoint = document.querySelector("footer");
while (startingPoint.nextElementSibling &&
startingPoint.nextElementSibling !== endingPoint) {
    startingPoint.nextElementSibling.remove();
}
</script>
</body>
</html>

コードのポイント： ループの条件式では、まず startingPoint.nextElementSibling が存在すること（null でないこと）を確認し、さらにそれが終了地点の要素と一致しないことを判定しています。これにより、開始要素と終了要素そのものは残しつつ、その間にある要素だけを安全に削除できます。

プログラムの実行方法

上記のプログラムを実行するには、ファイル名を「anyName.html（index.html）」として保存してください。その後、VS Codeエディタでファイルを右クリックし、「Open with Live Server」オプションを選択すると、ブラウザ上で動作を確認できます。

実行結果

プログラムを実行すると、以下のように出力されます。

JavaScriptで2つの要素の間にあるすべての要素を削除する方法｜remove()メソッドの使い方

実行後は、<nav> の「START」と <footer> の「END」だけが残り、その間にあった5つの <p> 要素がすべて削除されていることが確認できます。

  1. JavaScript DOMとは？基本の仕組みと要素の取得方法をわかりやすく解説

    JavaScriptのDOM（Document Object Model：ドキュメントオブジェクトモデル）は、Webページ上のHTML要素を表現する仕組みです。DOMはインターフェースとして機能し、ページのコンテンツやスタイルを変更することで、Webページを自由に操作できるようにします。 DOMにアクセスするには、Webページ上で右クリックして「検証（Inspect）」を選択します。すると画面の右側または左側にパネルが表示され、現在閲覧しているページのHTML要素を確認できます。要素にマウスカーソルを合わせると、ページ上の該当部分がハイライトされるため、どの要素がページのどのセクションに対応

  2. JavaScriptでDOMノードのすべての子要素を一括削除する方法

    JavaScriptでDOMノードからすべての子要素を削除したい場合は、親要素のinnerHTMLに空文字列（''）を設定するのが最もシンプルで手軽な方法です。これにより、その要素の中身が丸ごとクリアされます。 サンプルコード 実際に動作するコードを見てみましょう。ボタンをクリックすると、赤い枠のボックス内の子要素がすべて削除される仕組みです。 <!DOCTYPE html> <html lang="ja"> <head>     <meta charset="U