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

初心者が理解しやすいJavaScript要素削除の解説JS
この記事は約4分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、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秒後に要素を削除しています。

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

●注意点と対処法

要素を削除する際には、次の注意点と対処法を把握しておくと便利です。

要素が存在しない場合のエラー

削除しようとした要素が存在しない場合、エラーが発生します。

要素が存在するかどうか確認してから削除処理を行うことで、エラーを回避できます。

子要素も同時に削除される

要素を削除すると、その要素の子要素も同時に削除されます。

子要素を残したい場合は、子要素を別の要素に移動させてから削除を行ってください。

まとめ

JavaScriptで要素を削除する基本的な方法は、removeChild()とremove()の2つです。

また、条件に応じて要素を削除したり、一定時間後に要素を削除する方法もあります。

注意点と対処法を把握し、適切な方法で要素を削除してください。