JavaScriptで要素を削除！わかりやすい方法5選

はじめに
●JavaScriptで要素を削除する基本
- ○要素を削除する方法1：removeChild()
- ○要素を削除する方法2：remove()
●サンプルコードで学ぶ要素の削除方法
- ○サンプルコード1：removeChild()を使った要素の削除
- ○サンプルコード2：remove()を使った要素の削除
●応用例とサンプルコード
●注意点と対処法
- ○要素が存在しない場合のエラー
- ○子要素も同時に削除される
まとめ

はじめに

この記事を読めば、JavaScriptで要素を削除する方法ができるようになります。

●JavaScriptで要素を削除する基本

JavaScriptで要素を削除するには、主に2つの方法があります。

それぞれの方法と、その使い方を下記にご紹介します。

○要素を削除する方法1：removeChild()

親要素から子要素を削除する場合は、親要素のremoveChild()メソッドを使用します。

引数に削除したい子要素を指定することで、子要素を削除できます。

○要素を削除する方法2：remove()

要素自体を削除する場合は、要素のremove()メソッドを使用します。

このメソッドは引数が不要で、対象の要素を直接削除できます。

●サンプルコードで学ぶ要素の削除方法

それぞれの要素削除方法について、サンプルコードとともに詳しく解説していきます。

○サンプルコード1：removeChild()を使った要素の削除

下記のサンプルコードでは、親要素から子要素を削除する方法を見ていきましょう。

removeChild()メソッドを使って、親要素から子要素を削除しています。

// 親要素を取得
const parentElement = document.getElementById('parent');

// 削除したい子要素を取得
const childElement = document.getElementById('child');

// 子要素を削除
parentElement.removeChild(childElement);

○サンプルコード2：remove()を使った要素の削除

下記のサンプルコードでは、要素自体を削除する方法を紹介します。

remove()メソッドを使って、対象の要素を直接削除しています。

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

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

●応用例とサンプルコード

次に、要素削除の応用例とそれに対応するサンプルコードをご紹介します。

○応用例1：条件に応じて要素を削除する

特定の条件を満たす場合にだけ、要素を削除したいというケースがあります。

下記のサンプルコードでは、条件に応じて要素を削除する方法を表しています。

○サンプルコード3：条件に応じた要素の削除

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

// 条件を満たすかどうかチェック
if (targetElement.textContent === '削除') {
  // 要素を削除
  targetElement.remove();
}

○応用例2：一定時間後に要素を削除する

特定の時間が経過した後に要素を削除したい場合もあります。

この場合は、setTimeout()関数を使用して一定時間後に要素を削除することができます。

下記のサンプルコードでは、一定時間後に要素を削除しています。

○サンプルコード4：一定時間後の要素削除

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

// 3000ミリ秒（3秒）後に要素を削除する
setTimeout(() => {
  targetElement.remove();
}, 3000);

このサンプルコードでは、setTimeout()関数を使って3秒後に要素を削除しています。

引数には、実行したい処理（この場合は要素の削除）と、待機時間（ミリ秒単位）を指定しています。