JavaScriptでHTML要素を削除するための10のモダンな方法

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

webサイトを作成していると、ページ上の特定の要素を削除したくなる場面に遭遇することがあります。

例えば、ユーザーのアクションに応じて動的にコンテンツを変更する際などです。

そんな時、JavaScriptを使えば柔軟に要素の削除が行えます。

○要素削除の基本概念

JavaScriptで要素を削除する前に、まずは基本的な概念を理解しておきましょう。

JavaScriptはHTMLのDOM（Document Object Model）を操作することで、要素の追加、削除、変更などを行います。

DOMは、webページを構成するHTML要素の階層構造を表すもので、親子関係を持っています。

○DOMとは

DOMは、文書のオブジェクトモデル（Document Object Model）の略で、webページを構成するHTML要素をオブジェクトとして扱うための仕組みです。

DOMを使うことで、JavaScriptからHTML要素にアクセスし、様々な操作を行えます。

DOMはツリー構造になっており、html要素を頂点として、body、div、p、といった具合に枝分かれしています。

この親子関係を理解することが、要素の削除を行う上で重要になります。

例えば、次のようなHTML要素があるとします。

<div id="parent">
  <p>子要素1</p>
  <p>子要素2</p>
</div>

この場合、div要素が親要素、その中のp要素が子要素になります。

子要素を削除するには、親要素から見た子要素の位置を指定する必要があります。

JavaScriptでは、getElementById()、querySelector()などのメソッドを使って、特定の要素を取得できます。

要素を取得できれば、その要素に対して削除などの操作が行えるわけです。

●子要素を削除する方法

DOMの基本的な構造について理解したところで、早速JavaScriptを使って子要素を削除する方法を見ていきましょう。

子要素を削除するには、大きく分けて2つの方法があります。

1つは純粋なJavaScriptを使う方法で、もう1つはjQueryを使う方法です。

まずは、純粋なJavaScriptを使った子要素の削除方法について解説します。

JavaScriptには、removeChild()というメソッドがあります。

これは、指定した要素の子要素を削除するためのメソッドです。

○サンプルコード1：removeChildを使った削除

それでは、実際にremoveChild()を使って子要素を削除するサンプルコードを見てみましょう。

<div id="parent">
  <p id="child">これは子要素です</p>
</div>

<script>
  // 親要素を取得
  const parent = document.getElementById('parent');
  // 子要素を取得
  const child = document.getElementById('child');

  // 子要素を削除
  parent.removeChild(child);
</script>

このコードでは、まず親要素となるdiv要素と、削除対象の子要素であるp要素をそれぞれ取得しています。

そして、親要素に対してremoveChild()メソッドを呼び出し、引数に子要素を指定することで、子要素を削除しています。

実行結果は次のようになります。

<div id="parent">
</div>

removeChild()を使えば、このように簡単に子要素を削除できます。

ただし、削除対象の要素が親要素の直下にある必要があるという点に注意が必要です。

孫要素以降の要素を削除する場合は、再帰的に処理を行う必要があります。

●特定の要素を削除する方法

子要素の削除方法が分かったところで、今度は特定の要素を削除する方法について見ていきましょう。

webサイトを作っていると、idやclassで指定した特定の要素だけを削除したいというケースがよくあります。

そんな時、getElementById()やquerySelectorAll()などを使って目的の要素を取得し、そこからremove()やremoveChild()を使えば、スムーズに要素を削除できます。

ちょっとややこしいですが、サンプルコードを見ながら一緒に理解を深めていきましょう。

○サンプルコード3：idを指定して削除

まずは、idを指定して要素を削除する方法から見ていきます。

次のようなHTMLがあるとします。

<div id="parent">
  <p id="child1">これは子要素1です</p>
  <p id="child2">これは子要素2です</p>
</div>

ここから、id=”child1″の要素だけを削除するには、次のようなJavaScriptを書きます。

// 削除対象の要素を取得
const child1 = document.getElementById('child1');

// 要素を削除
child1.remove();

getElementById()を使って、id=”child1″の要素を取得し、そこからremove()を呼び出すだけです。

これを実行すると、次のようにid=”child1″の要素だけが削除されます。

<div id="parent">
  <p id="child2">これは子要素2です</p>
</div>

○サンプルコード4：クラスを指定して削除

次は、クラスを指定して要素を削除する方法です。

次のようなHTMLを例に考えてみましょう。

<div id="parent">
  <p class="child">これは子要素1です</p>
  <p class="child">これは子要素2です</p>
</div>

ここから、class=”child”の要素を全て削除するには、querySelectorAll()を使って次のようなコードを書きます。

// 削除対象の要素を全て取得
const children = document.querySelectorAll('.child');

// 要素を1つずつ削除
children.forEach(child => {
  child.remove();
});

querySelectorAll()は、指定したセレクタに該当する要素を全て取得します。

ここでは、class=”child”の要素を全て取得しています。

取得した要素は、forEach()を使ってループ処理し、1つずつremove()で削除しています。

これを実行すると、次のようにclass=”child”の要素が全て削除されます。

<div id="parent">
</div>

○サンプルコード5：セレクタを使った削除

最後は、もう少し複雑なセレクタを使って要素を削除する方法です。

次のようなHTMLを例に考えてみましょう。

<div id="parent">
  <p class="child">これは子要素1です</p>
  <p class="child">これは子要素2です</p>
  <p>これは子要素3です</p>
</div>

ここから、class=”child”の要素のうち最初の1つだけを削除するには、次のようなコードを書きます。

// 削除対象の要素を取得
const child = document.querySelector('#parent .child:first-child');

// 要素を削除
child.remove();

querySelector()は、指定したセレクタに該当する要素のうち最初の1つを取得します。

ここでは、id=”parent”の要素の中のclass=”child”の要素のうち最初の1つを取得しています。

取得した要素をremove()で削除することで、次のように目的の要素だけを削除できます。

<div id="parent">
  <p class="child">これは子要素2です</p>
  <p>これは子要素3です</p>
</div>

このように、セレクタを駆使することで、かなり柔軟に要素を指定して削除できます。

実務でもよく使う方法なので、ぜひマスターしておきたいテクニックです。

●全ての子要素を削除する方法

特定の要素を削除する方法が分かったところで、今度は全ての子要素を一括で削除する方法について見ていきましょう。

例えば、掲示板やチャットのようなアプリケーションを作っていると、ユーザーの操作によって動的に追加された要素を、一度に全て削除したいというケースがあります。

そんな時、while文やinnerHTMLを使えば、簡単に全ての子要素を削除できます。

○サンプルコード6：while文を使った全削除

最初は、while文を使って全ての子要素を削除する方法を見ていきましょう。

次のようなHTMLを例に考えてみます。

<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

ここから、id=”list”のul要素の中の全てのli要素を削除するには、次のようなJavaScriptを書きます。

const list = document.getElementById('list');

while (list.firstChild) {
  list.removeChild(list.firstChild);
}

まず、getElementById()を使ってul要素を取得しています。

そして、そのul要素の中に子要素が存在する限り（while文の条件）、firstChildプロパティで最初の子要素を取得し、removeChild()で削除するという処理を繰り返しています。

これを実行すると、次のように全てのli要素が削除されます。

<ul id="list">
</ul>

○サンプルコード7：innerHTMLを使った全削除

次は、innerHTMLを使って全ての子要素を削除する方法です。

先ほどと同じHTMLを例に考えてみましょう。

<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

ここから、id=”list”のul要素の中の全ての子要素を削除するには、次のような1行のコードを書くだけです。

document.getElementById('list').innerHTML = '';

getElementById()を使ってul要素を取得し、そのinnerHTMLプロパティに空文字を代入するだけ。

これだけで、ul要素の中の全ての子要素が削除されます。

実行結果は、先ほどのwhile文を使った方法と同じです。

<ul id="list">
</ul>

ただ、innerHTMLを使った方法は、子要素に関連付けられたイベントリスナーなども全て削除されてしまうという点に注意が必要です。

イベントリスナーを維持したまま子要素だけを削除したい場合は、while文を使った方法の方が適しています。

●親要素ごと削除する方法

全ての子要素を一括で削除する方法が分かったところで、今度は親要素ごと削除する方法について見ていきましょう。

例えば、掲示板アプリを作っていて、ある投稿を削除する際に、その投稿の親要素であるdiv要素ごと削除したいというケースがあるかもしれません。

そんな時、親要素に対してremoveChild()を使ったり、closest()を使って親要素を特定してから削除したりする方法が有効です。

○サンプルコード8：親要素のremoveChild

最初は、親要素に対してremoveChild()を使って、目的の要素を削除する方法を見ていきましょう。

次のようなHTMLを例に考えてみます。

<div id="parent">
  <p id="child">これは子要素です</p>
</div>

ここから、id=”child”のp要素を、その親要素ごと削除するには、次のようなJavaScriptを書きます。

const child = document.getElementById('child');
child.parentNode.removeChild(child);

まず、getElementById()を使ってp要素を取得しています。

そして、そのp要素のparentNodeプロパティを使って親要素（div要素）を取得し、removeChild()で子要素（p要素）を削除しています。

これを実行すると、次のようにp要素とその親要素のdiv要素が削除されます。

（空）

○サンプルコード9：closest()を使った親要素削除

次は、closest()を使って親要素を特定し、削除する方法です。

先ほどと同じHTMLを例に考えてみましょう。

<div id="parent">
  <p id="child">これは子要素です</p>
</div>

ここから、id=”child”のp要素を、その親要素ごと削除するには、次のようなコードを書きます。

const child = document.getElementById('child');
child.closest('div').remove();

getElementById()を使ってp要素を取得し、そこからclosest()を使って親要素のdiv要素を特定しています。

closest()は、指定したセレクタに該当する最も近い祖先要素を取得するメソッドです。

特定した親要素に対してremove()を呼び出すことで、親要素ごと削除しています。

実行結果は、先ほどのremoveChild()を使った方法と同じです。

（空）

ただ、closest()を使った方法は、親要素が何層も上にある場合でも、簡単に目的の親要素を特定できるという利点があります。

実務でもよく使われる方法なので、ぜひ覚えておいてください。

親要素ごと削除する方法、いかがでしたか？

これで、要素削除の基本的な方法は一通り習得できたのではないでしょうか。

でも、実際にコードを書いていると、思わぬエラーに遭遇することもあるかもしれません。

そんな時のために、よくあるエラーとその対処法についても、簡単に触れておきましょう。

例えば、removeChild()を使う際に「ノードが見つからない」というエラーが出ることがあります。

これは大抵、削除対象の要素が親要素の直下にない場合に起こります。

しっかりと親子関係を確認して、コードを見直すことが大切です。

他にも、要素は削除されたのに、そこに付随していたイベントが残ってしまうというケースもあります。

これを防ぐには、要素を削除する前にremoveEventListener()を使ってイベントを明示的に削除しておく必要があります。

●よくあるエラーと対処法

JavaScriptを使ってDOM要素を削除する際、時にはエラーに遭遇することがあります。

初心者の方なら、「なぜエラーが出るのか分からない！」と焦ってしまうかもしれません。

ここでは、要素削除でよく遭遇するエラーとその対処法を見ていきましょう。

○removeChildでエラーが出る場合

removeChild()を使って要素を削除しようとした時、次のようなエラーが出ることがあります。

Uncaught TypeError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

これは、「削除しようとしている要素が、指定した親要素の直下にない」という意味のエラーです。

例えば、次のようなHTMLがあるとします。

<div id="parent">
  <div id="child">
    <p>これは孫要素です</p>
  </div>
</div>

ここで、以下のようなJavaScriptを実行すると、上記のエラーが発生します。

const parent = document.getElementById('parent');
const grandchild = document.querySelector('#child p');

parent.removeChild(grandchild); // エラー

なぜなら、p要素はdiv#parentの直下ではなく、div#childの下にあるからです。

このエラーを解決するには、次のように、p要素の直接の親要素であるdiv#childに対してremoveChild()を使う必要があります。

const child = document.getElementById('child');
const grandchild = document.querySelector('#child p');

child.removeChild(grandchild); // OK

○要素が削除されない場合

要素を削除するコードを書いたのに、要素が削除されないことがあります。

この場合、次のような原因が考えられます。

1. 削除対象の要素が正しく選択されていない
2. 削除対象の要素が動的に追加されたものである
3. 削除対象の要素が既に削除されている

例えば、次のようなHTMLがあるとします。

<div id="parent">
  <p id="child1">これは子要素1です</p>
  <p id="child2">これは子要素2です</p>
</div>

ここで、次のようなJavaScriptを実行しても、要素は削除されません。

const parent = document.getElementById('parent');
parent.removeChild('child1'); // 要素は削除されない

なぜなら、removeChild()には要素オブジェクトを渡す必要があるのに、ここでは文字列’child1’を渡しているからです。

正しくは、次のようにします。

const parent = document.getElementById('parent');
const child1 = document.getElementById('child1');
parent.removeChild(child1); // OK

また、動的に追加した要素を削除する場合は、要素の参照を変数などに保持しておく必要があります。

○イベントが残ってしまう場合

要素を削除した後も、その要素に付与していたイベントリスナーが残ってしまうことがあります。

これは、メモリリークの原因になります。

例えば、次のようなHTMLとJavaScriptがあるとします。

<div id="parent">
  <button id="child">Click me!</button>
</div>

const child = document.getElementById('child');

child.addEventListener('click', function() {
  console.log('Clicked!');
});

setTimeout(function() {
  child.remove();
}, 1000);

ここでは、buttonにクリックイベントを付与した後、1秒後にbutton要素を削除しています。

しかし、button要素を削除しても、クリックイベントは残ったままです。

これを防ぐには、要素を削除する前に明示的にイベントリスナーを削除する必要があります。

const child = document.getElementById('child');

function handleClick() {
  console.log('Clicked!');
}

child.addEventListener('click', handleClick);

setTimeout(function() {
  child.removeEventListener('click', handleClick); // イベントリスナーを削除
  child.remove(); // 要素を削除
}, 1000);

このように、removeEventListener()を使ってイベントリスナーを削除してから、要素を削除するようにします。

●要素削除の応用例

さあ、ここまでで要素削除の基本的な方法は一通り解説してきました。

でも、実際の開発では、もっと複雑なケースに遭遇することもあるでしょう。

そんな時のために、ここでは要素削除のちょっとした応用例を見ていきましょう。

○サンプルコード10：動的に生成した要素の削除

JavaScriptを使って動的にDOM要素を生成することがあります。

例えば、ユーザーの入力に応じてリストアイテムを追加するようなケースです。

そんな時、動的に生成した要素を削除するにはどうすればいいでしょうか。

実は、動的に生成した要素でも、これまで学んだ方法で削除できます。

ポイントは、生成した要素の参照を変数などに保持しておくことです。

例えば、次のようなコードを考えてみましょう。

<ul id="list"></ul>

<input type="text" id="input">
<button id="add">Add</button>
<button id="remove">Remove</button>

const list = document.getElementById('list');
const input = document.getElementById('input');
const addButton = document.getElementById('add');
const removeButton = document.getElementById('remove');

let listItem; // 追加された要素の参照を保持する変数

addButton.addEventListener('click', function() {
  const text = input.value;
  if (text) {
    listItem = document.createElement('li');
    listItem.textContent = text;
    list.appendChild(listItem);
    input.value = '';
  }
});

removeButton.addEventListener('click', function() {
  if (listItem) {
    list.removeChild(listItem);
    listItem = null;
  }
});

ここでは、input要素に入力されたテキストを元に、li要素を動的に生成し、ul要素の子要素として追加しています。

その際、生成したli要素の参照をlistItem変数に保持しています。

そして、Remove ボタンがクリックされた時、listItem変数を使ってli要素を削除しています。

これで、動的に生成した要素も問題なく削除できます。

○要素の非表示化との使い分け

要素を削除する代わりに、非表示にするという選択肢もあります。

非表示にするには、要素のdisplayプロパティを’none’に設定します。

element.style.display = 'none';

削除と非表示、どちらを選ぶべきでしょうか。

これは、状況によって使い分ける必要があります。

要素を削除すると、DOMツリーから完全に取り除かれます。

これは、その要素が二度と必要ない場合に適しています。

ただ、削除した要素を再び表示するには、新たに要素を作成する必要があります。

一方、非表示にした要素は、DOMツリー上に残ります。

これは、一時的に要素を隠したい場合に便利です。

非表示にした要素を再び表示するのは、displayプロパティを’block’などに設定するだけで済みます。

element.style.display = 'block';

ただし、非表示の要素はDOMツリー上に残るため、メモリを消費し続けます。

多数の要素を非表示にしていると、アプリケーションのパフォーマンスに影響を与える可能性があります。

したがって、要素が二度と必要ない場合は削除を、一時的に隠したい場合は非表示を選ぶのが良いでしょう。

まとめ

この記事で学んだ知識を活かして、実際の開発でどんどん応用していってください。

エラーを恐れず、たくさんのコードを書いて試行錯誤を繰り返すことが、JavaScriptスキルの向上につながります。

常に学ぶ姿勢を持ち続け、新しいことにチャレンジし続けることが大切です。