JavaScriptでHTMLを削除するにはどうすればいいですか？

JavaScriptでHTMLを削除するにはどうすればいいですか？

Webページの一部を動的に削除したい場合、JavaScriptを使用することがよくあります。JavaScriptでは、特定のHTML要素を削除するための方法がいくつか用意されています。この記事では、JavaScriptを用いてHTML要素を削除する方法を詳しく解説していきます。

1. remove()メソッドによる削除

最も一般的な方法は、対象のHTML要素オブジェクトのremove()メソッドを使用することです。このメソッドは、DOMツリーから要素自身を削除します。具体的な手順は以下の通りです。

  1. 削除したいHTML要素をdocument.getElementByIdやdocument.querySelectorなどのメソッドで取得します。
  2. 取得した要素オブジェクトに対してremove()メソッドを実行します。

以下は、IDが"target"である要素を削除するJavaScriptコードの例です。


<!DOCTYPE html>
<html>
<head>
  <title>HTML要素の削除</title>
</head>
<body>
  <div id="target">削除される要素です</div>
  <button onclick="removeElement()">要素を削除</button>

  <script>
    function removeElement() {
      const targetElement = document.getElementById("target");
      targetElement.remove();
    }
  </script>
</body>
</html>

2. jQueryを使用した削除

JavaScriptライブラリであるjQueryを使用すると、より簡潔なコードでHTML要素を削除できます。jQueryでは、remove()メソッドに加えて、empty()メソッドを使うことも可能です。

メソッド 説明
remove() 指定した要素自身とその子要素を全て削除します。
empty() 指定した要素の子要素のみを全て削除します。要素自身は残ります。

以下は、クラス名が"target"である全ての要素をjQueryのremove()メソッドで削除する例です。


<!DOCTYPE html>
<html>
<head>
  <title>HTML要素の削除（jQuery）</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <div class="target">削除される要素です</div>
  <div class="target">これも削除されます</div>
  <button id="removeButton">要素を削除</button>

  <script>
    $(document).ready(function() {
      $("#removeButton").click(function() {
        $(".target").remove();
      });
    });
  </script>
</body>
</html>

まとめ

この記事では、JavaScriptを用いてHTML要素を削除する方法について解説しました。remove()メソッドやjQueryを利用することで、動的にWebページの内容を変更することができます。状況に応じて適切な方法を選択し、よりインタラクティブなWebページを作成してください。

参考文献

よくある質問

Q1. 削除した要素は後から 다시 追加できますか？

A1. いいえ、remove()メソッドで削除した要素はDOMツリーから完全に削除されるため、後から再度追加することはできません。もし要素を一時的に非表示にしたい場合は、displayプロパティをnoneに設定するか、hidden属性を付与する方法が考えられます。後から再表示する場合は、それぞれ逆の操作を行います。

Q2. remove()メソッドとinnerHTML = ''の違いは何ですか？

A2. innerHTML = ''は要素の中身を空にするもので、要素自身は残ります。一方、remove()メソッドは要素自身をDOMツリーから削除します。要素を完全に削除したい場合はremove()メソッドを使用し、要素の中身だけを空にしたい場合はinnerHTML = ''を使用します。

Q3. JavaScriptで特定の条件に合致する要素だけを削除するにはどうすればいいですか？

A3. querySelectorAll()メソッドなどで条件に合致する要素をNodeListとして取得し、ループ処理で各要素に対してremove()メソッドを実行することで実現できます。jQueryを使用する場合は、セレクタで条件を指定することでより簡潔に記述できます。

その他の参考記事:jquery class 削除