【JavaScript】要素を削除する方法を初心者向けにわかりやすく解説

フロントエンド開発•
JavaScriptHTML/CSS

はじめに

皆さんはWebページを操作するときに、不要な要素を消したいと感じることがあるのではないでしょうか。
例えば、ユーザーが不要になった入力フォームを削除したい場合や、特定の要素を条件に応じて非表示ではなく完全に取り除きたいケースなどが挙げられます。

JavaScriptを使うことで、ページをリロードせずに要素を削除できるため、操作がスムーズになりやすいです。
ただ、いざ要素を削除しようと思っても「どのメソッドを使えばいいのか」「どうやって実務の場面で活用すればいいのか」がわからず、戸惑う方が少なくないはずです。

この記事では、JavaScriptで要素を削除する方法を初心者向けに解説します。
実務で考えられるシチュエーションも交えながら、丁寧に説明していきますので、ぜひ参考にしてみてください。

この記事を読むとわかること

  • JavaScriptで要素を削除する基本的な方法
  • remove() メソッドと removeChild() メソッドの違い
  • 実際のシーン別に考える要素削除の活用方法
  • 要素削除時に気をつけたいポイント
  • メモリ管理やイベントリスナーの扱い方

JavaScriptで要素を削除するとは？

Webページでは、HTML要素がDOM（Document Object Model）という仕組みによってツリー構造で管理されています。
JavaScriptを使うと、DOMにアクセスして要素を生成・変更・削除できます。

要素を削除するときは、大まかに次の2つの観点があります。

  1. 見た目だけでなく、DOMから完全に取り除く
  2. 見た目上は消すが、DOMには残しておく (display: none などで非表示にするだけ)

この記事で扱うのは1番の「DOMから完全に取り除く」方法です。
表示を消すだけでなく、メモリ的にも対象の要素を切り離す効果が期待できるため、多くの実務シーンで役立ちます。

実務でどんなときに要素を削除するのか

実際の開発現場では、以下のようなケースで要素を削除することがあります。

不要になった入力フォームを取り除きたい場合

アンケートや問い合わせフォームで「追加の質問が必要なくなったので削除」など

ダイナミックに生成した要素が必要なくなった場合

JavaScriptでモーダルウィンドウやポップアップを生成し、用が済んだら削除

リアルタイムでリストのアイテムを追加・削除するUI

ショッピングカートなどのリストにおいて、ユーザーがアイテムを削除したいとき

これらのシーンでは、視覚的にも要素を消すだけでなく、DOMからしっかり取り除くことで、後の処理やメモリ管理もスッキリしやすくなります。

要素を削除するための基本手順

要素削除の大まかな流れは、次のステップで捉えるとわかりやすいです。

  1. 削除したい要素を取得する
  2. 取得した要素に対して削除のメソッドを呼び出す

ここでは、よく使われる2つの方法を紹介します。

方法1：remove() メソッドを使う

remove() メソッドは、削除したい要素そのものに対してメソッドを呼び出してDOMツリーから取り除く方法です。
構文はシンプルなので、初心者でもわかりやすいのではないでしょうか。

<!-- HTMLの例 -->
<div id="container">
  <p id="target">消したい要素です</p>
  <p>この要素は残したい要素です</p>
</div>

<script>
  // 削除したい要素を取得
  const targetElement = document.getElementById("target");

  // 要素を削除
  targetElement.remove();
</script>

上記コードを実行すると、id="target" の要素がDOMから丸ごと取り除かれます。
remove() メソッドは比較的新しい書き方で、要素を直接指定して呼び出せるのがわかりやすい点です。

方法2：removeChild() メソッドを使う

もう1つの方法は、removeChild() メソッドです。
これは「ある親要素の子要素を削除する」仕組みになっています。

<!-- HTMLの例 -->
<div id="container">
  <p id="target">消したい要素です</p>
  <p>この要素は残したい要素です</p>
</div>

<script>
  // 親要素
  const container = document.getElementById("container");
  // 削除したい子要素
  const targetElement = document.getElementById("target");

  // 親要素から見た「子要素」をremoveChildで削除
  container.removeChild(targetElement);
</script>

こちらは container のように、あくまで「親」側に命じる形で要素を削除します。
直接 targetElement.remove() と書くのではなく、container.removeChild(...) とするのがポイントです。

removeChild() の特徴は、「あくまで親子関係を前提にしている」という点です。
削除対象が親要素の子である必要があります。
ただ、後述のように実務では柔軟に使い分ける場面があります。

remove() と removeChild() の違い

remove() と removeChild() は同じく要素を削除する目的ですが、使い勝手に微妙な違いがあります。

使いやすさの比較

  • remove() メソッド

    • 対象の要素を取得してそのまま削除できる
    • シンプルに書ける場合が多い

  • removeChild() メソッド

    • 親要素を取得して、その子要素を削除する
    • 対象が親子関係にあるのかを意識する必要がある

実務だと「どの要素を削除するか、どの要素が何の子要素なのか」を明確に把握している方が管理がしやすいケースがあります。
一方で、単純に「これを消すんだ」という直感的な書き方をしたいのであれば、remove() が便利です。

ブラウザ対応やサポート状況

remove() は、ほとんどの環境で利用できます。
ただし、ある程度新しい環境を前提としていることが多いです。
一方で removeChild() は古くからサポートされています。
とはいえ初心者の場合は、まずは remove() を使い始め、その後必要に応じて removeChild() を理解する流れで問題ないでしょう。

実務で役立つシーン別・要素削除の活用方法

1. 入力フォームの動的削除

ユーザー入力フォームが増えすぎると、ユーザーが不要になった項目を削除したいというケースが想定されます。
例えば、アンケートフォームでオプションの質問項目を追加して、それを後から消すといった操作です。

<div id="form-area">
  <div class="option-field">
    <label>オプション質問1</label>
    <input type="text" />
    <button class="remove-btn">削除</button>
  </div>
  <div class="option-field">
    <label>オプション質問2</label>
    <input type="text" />
    <button class="remove-btn">削除</button>
  </div>
</div>

<script>
  const removeButtons = document.querySelectorAll(".remove-btn");

  removeButtons.forEach((btn) => {
    btn.addEventListener("click", (event) => {
      // ボタンの親要素を取得（ここでは .option-field）
      const parentField = event.target.closest(".option-field");

      // 親要素を削除
      if (parentField) {
        parentField.remove(); // remove() を使って親要素ごと削除
      }
    });
  });
</script>

ここでは、ボタンが押されたらそのボタンを含む要素ごと削除する形をとっています。
このように、イベントリスナーで削除のタイミングを制御すると、動的なフォーム操作に対応しやすいでしょう。

2. リストのアイテムを削除するショッピングカート

ECサイトなどでショッピングカートを作る際に、ユーザーがアイテムを削除する操作が必要となります。
以下のようなシンプルな例を考えてみましょう。

<ul id="cart-list">
  <li>
    <span>商品A</span>
    <button class="delete-item">削除</button>
  </li>
  <li>
    <span>商品B</span>
    <button class="delete-item">削除</button>
  </li>
</ul>

<script>
  const cartList = document.getElementById("cart-list");

  cartList.addEventListener("click", (e) => {
    if (e.target.classList.contains("delete-item")) {
      // 親要素(li)を取得して削除する
      const itemToDelete = e.target.closest("li");
      itemToDelete.remove();
    }
  });
</script>

この例では、ul 要素にイベントを委譲して、クリックされた対象が .delete-item クラスを持っているかどうかを判定し、該当アイテムを削除しています。
このような形で書くと、リスト内にいくつアイテムがあってもまとめて処理できるので効率的でしょう。

3. モーダルウィンドウやアラート要素の削除

モーダルウィンドウやアラートメッセージをJavaScriptで動的に生成したあと、閉じる際には要素を完全にDOMから取り除きたいこともあるかもしれません。

<button id="open-modal">モーダルを開く</button>

<script>
  const openModalBtn = document.getElementById("open-modal");

  openModalBtn.addEventListener("click", () => {
    // モーダル要素を動的に生成
    const modal = document.createElement("div");
    modal.classList.add("my-modal");
    modal.innerHTML = `
      <div class="modal-content">
        <p>モーダルウィンドウの内容</p>
        <button class="close-modal">閉じる</button>
      </div>
    `;
    document.body.appendChild(modal);

    // 閉じるボタンが押されたときにモーダルを削除
    const closeModalBtn = modal.querySelector(".close-modal");
    closeModalBtn.addEventListener("click", () => {
      // remove() で要素を削除
      modal.remove();
    });
  });
</script>

生成したモーダルウィンドウは、用が済んだら remove() を使ってサッと消去できます。
こうすることで、次にモーダルを再度開くときも新しい要素としてDOMに追加されるため、表示のバグを防ぎやすくなります。

要素削除時に気をつけたいポイント

イベントリスナーの整理

要素を削除するときに、その要素に関連付けられたイベントリスナーが一緒に消えるのか気になる方がいるでしょう。
原則、要素ごと削除すれば、そこに登録されているイベントリスナーも一緒になくなるイメージです。

ただし、削除した要素を変数に保持し続けている場合や、別のスコープで参照が残っている場合、意図せずメモリを消費し続ける可能性があります。
たとえば、関数の外でグローバル変数として削除済み要素への参照が残っているケースです。

基本的には、DOMから要素を削除すればイベントリスナーも不要になるため、いくつも残り続けることはあまりないですが、念のため参照が残っていないかを確認すると安心です。

大量の要素を一括で削除する場合

たくさんの要素を一度に削除したいケースも考えられます。
例えば、テーブルの行をまとめて削除するときや、検索結果リストをいったんクリアするときなどです。

その場合、ループを使って1つずつ要素を削除する方法もありますが、以下のように innerHTML = "" を使ってしまう方法もあります。
ただし、innerHTML を上書きする場合は、対象の要素内にあったイベントリスナーや状態がまとめて消えてしまう点に注意してください。

<div id="list-wrapper">
  <p>アイテム1</p>
  <p>アイテム2</p>
  <p>アイテム3</p>
</div>

<script>
  const wrapper = document.getElementById("list-wrapper");
  // wrapper内のすべての要素を一括で削除
  wrapper.innerHTML = "";
</script>

大量の要素を効率的に削除したいなら、innerHTML = "" は手軽な方法ですが、要素単位の細かい制御が必要な場合には remove() や removeChild() を使った方がトラブルを回避しやすいです。

DOM操作のパフォーマンス

実務の現場では、ページ内のDOM操作が多すぎると動作が重くなることがあります。
要素の削除が頻繁に行われるアプリケーションでは、なるべく削除や再描画が連続して行われる回数を減らす工夫が求められます。

例えば、以下のような流れです。

  1. まとめて削除したい要素を一時的に配列などで管理する
  2. 後でまとめて remove() あるいは innerHTML = "" で削除する
  3. 不要な再描画を発生させない

こうした処理を心がけると、ユーザー視点でスムーズに感じられるでしょう。

大量のDOM操作を短い間隔で連続して行うと、画面の再描画が頻繁に行われる可能性があります。まとめて操作するとパフォーマンスが向上しやすいです。

ライブラリやフレームワークでの要素削除

Vue.jsやReactなどのフレームワークを使うと、要素削除の方法はコンポーネント管理や仮想DOMに任せる形が主流になります。
それでも、ライブラリ導入前の素のJavaScriptでも要素削除が必要になる場面は決して少なくありません。
まずは基礎となるDOM操作をしっかり理解しておくと、フレームワークのライフサイクル管理なども把握しやすくなるでしょう。

メモリ管理とクリーンアップ

メモリリークが発生するケース

JavaScriptで要素を削除するとき、要素への参照がどこにも残っていなければメモリ上からも解放されます。
ただし、プログラムのどこかで削除済みの要素を変数に持ち続けていると、JavaScriptエンジンはその要素を「まだ使われている」と判断してしまうことがあります。

let deletedElement = null;

function createElementAndDelete() {
  const tempDiv = document.createElement("div");
  tempDiv.textContent = "一時的な要素";
  document.body.appendChild(tempDiv);

  // いったん要素を削除
  tempDiv.remove();

  // もしここで変数deletedElementに代入してしまうと
  deletedElement = tempDiv;
}

// このdeletedElementに何度もアクセスするようなコードがあると
// 本来不要な要素がメモリ上に残り続ける可能性がある

このように変数で参照を持っていると、DOMから要素は消えていても、内部的にはオブジェクトを保持してしまうケースがあります。
必要に応じて変数を null に戻したり、無意味に参照を残さないように気をつけるとよいでしょう。

イベントリスナーの参照にも注意

イベントリスナーを削除したい要素に追加していた場合、その要素がメモリから解放されるためには「要素への参照＋イベントリスナーへの参照」が両方とも切れていることが理想です。
ですが、通常の使い方では、要素をDOMから削除して変数も参照を持っていなければ問題になりにくいです。
ただ、カスタムオブジェクトが要素をキーとして使うような複雑なコードを書いているときは、意図せずメモリに残ることがあるので要注意です。

実務シーンを想定した小さなサンプル

タスク管理アプリでの要素削除例

簡単なタスク管理アプリを想定して、要素削除の流れをまとめてみましょう。

<input type="text" id="task-input" placeholder="タスクを入力" />
<button id="add-task">追加</button>
<ul id="task-list"></ul>

<script>
  const taskInput = document.getElementById("task-input");
  const addTaskBtn = document.getElementById("add-task");
  const taskList = document.getElementById("task-list");

  // タスク追加
  addTaskBtn.addEventListener("click", () => {
    const taskText = taskInput.value.trim();
    if (!taskText) return;

    const li = document.createElement("li");
    li.innerHTML = `
      <span>${taskText}</span>
      <button class="delete-task">削除</button>
    `;
    taskList.appendChild(li);
    taskInput.value = "";
  });

  // タスク削除（イベント委譲）
  taskList.addEventListener("click", (e) => {
    if (e.target.classList.contains("delete-task")) {
      const li = e.target.closest("li");
      li.remove();
    }
  });
</script>

上記のコードでは、タスクを追加しては削除する流れを直感的に確認できます。
このように、追加と削除をセットで考えるときは、DOMに追加している場所と削除している場所がそれぞれどこなのかを整理すると、バグを起こしにくくなるでしょう。

削除以外の選択肢：非表示との違い

JavaScriptで要素を削除する代わりに、CSSで display: none; を適用するなどして非表示にするケースもあります。
見た目には要素が消えたように見えますが、DOM上は残っているという違いがあります。

  • 削除

    • 要素がDOMから取り除かれる
    • イベントリスナーや変数の参照がない場合、メモリからも解放される
    • 再度表示しようとすると、新たに要素を作る必要がある

  • 非表示 (display: none; など)

  • 要素がDOMに残る

  • 状態やイベントリスナーも保持される

  • 再度表示したいときはCSSプロパティを変更するだけで済む

実務上「頻繁に表示・非表示を切り替える」場合は、DOMを削除せずにCSSを切り替える方が動作がスムーズになる場合もあります。
逆に「もう本当に必要なくなった」という場合は削除しておいた方が、今後の管理が楽になりやすいです。

まとめ

ここまで、JavaScriptで要素を削除する様々な方法や、実務で活かすためのポイントを解説してきました。
初心者の皆さんでも理解しやすいように、あえて複雑なフレームワークなどは使わず、素のJavaScriptでの基本動作にフォーカスしています。

JavaScriptで要素を削除する手段としては、remove() と removeChild() が代表的です。
フォームやリストのアイテム削除、モーダルウィンドウのクローズなど、いろいろな場面で応用できます。

実務では、大量の要素を一括で削除したい場合や、イベントリスナー・メモリ管理の観点からどの時点で削除するかなど、考慮すべきことも増えます。
しかし、基本的な仕組みさえ理解していれば、フレームワークを使うときも含めて応用しやすいのではないでしょうか。

普段の開発で、不要な要素をすっきり取り除きたいときは、ぜひ本記事を参考にしてみてください。

JavaScriptをマスターしよう

この記事で学んだJavaScriptの知識をさらに伸ばしませんか？
Udemyには、現場ですぐ使えるスキルを身につけられる実践的な講座が揃っています。

JavaScriptの人気講座ランキングを見る筆者おすすめ No.1 講座！「ちゃんと学ぶ、HTML/CSS + JavaScript」
フロントエンド開発の新着記事をチェック

フロントエンドエンジニアとは？初心者にもわかりやすい徹底解説