JavaScriptでDOM操作で要素を削除する方法を現役エンジニアが解説【初心者向け】

JavaScriptのDOM操作で要素を削除する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

目次

• 要素自身を削除する
• 子要素を削除する
• 子要素をすべて削除する
• まとめ
• JavaScriptを学習中の方へ

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

今回は、JavaScriptに関する内容だね！

どういう内容でしょうか？

JavaScriptのDOM操作で要素を削除する方法について詳しく説明していくね！

お願いします！

※DOMとはHTMLを操作する仕組みのことで、木の枝のような階層構造になっています。DOMの操作について、詳しくは解説記事「JavaScriptでDOMを操作する方法【初心者向け】」をご覧ください。

要素自身を削除する

呼び出した要素自身を削除するときは、removeメソッドを使います。

書式

削除する要素.remove();

削除する要素自身から、removeメソッドを呼び出します。

removeメソッドで要素を削除すると、削除した要素内の他の子要素も含めてすべて削除されます。

クリックされた時の処理など、イベントを発生させた要素そのものを削除する場合は、受け取ったEventオブジェクトのtargetからremoveメソッドを呼び出せます。

他の要素を削除したいのであれば、「document.getElementById」などで取得します。

※イベントとは、マウスのクリックやページの読み込みが完了したときなどの動作を指します。JavaScriptではイベントが発生したときに実行する関数を指定するために、各要素のonclick属性などに処理する関数を指定できます。onclick属性については解説記事「クリック時の処理！JavaScriptでonclickを使う方法【初心者向け】」をご覧ください。

※Eventオブジェクトとは、イベントが発生したときの情報が収められているものです。イベントの発生源である要素などが取得できます。JavaScriptの関数にEventオブジェクトを渡すには、HTMLのonclick属性に「event」を引数として渡します。

サンプルコード

クリックしたボタンそのものと、「パープル」の要素自身を削除するサンプルコードです。

ソースコード

// 「このボタンを削除」 がクリックされた時の処理
function del_this(event) {
    //イベントの発生源の要素を削除
    event.target.remove();
}

// 「パープルを削除」 がクリックされた時の処理
function del_purple(){
    //「パープル」の要素をIDから取得
    const elem_purple = document.getElementById('purple');
    //elem_purple（idがpurple）の要素自身を削除
    elem_purple.remove();
}

<p>レッド</p>
<p id="purple">パープル</p>
<p>グリーン</p>
<p>ブルー</p>

<button onclick="del_this(event)">このボタンを削除</button>
<button onclick="del_purple()">パープルを削除</button>

実行結果

See the Pen
js_remove_this by mentor-inoue-y (@mentor-inoue-y)
on CodePen.

解説

クリックされた要素自身を削除

function del_this(event) { ～ }

「このボタンを削除」ボタンがクリックされたときに呼び出される関数を定義しています。

HTMLの「このボタンを削除」ボタン（button要素）にあるonclick属性に、「del_this(event)」と指定して関数が呼び出されるようにしています。

HTMLのonclick属性でeventを引数で渡すことにより、イベントを発生させた要素の情報を関数に送れます。

イベントを処理する関数 del_this(event)でeventを受け取って、クリックされた要素をevent.targetで取得できます。

event.target.remove();

event.targetはイベント（今回はクリック動作）の発生源の要素である「このボタンを削除」ボタンを指していて、removeメソッドにより要素自身を削除できます。

取得した要素自身を削除

function del_purple(){ ～ }

「パープルを削除」ボタンがクリックされたら呼び出される関数を定義しています。

HTMLの「パープルを削除」ボタン（button要素）にあるonclick属性に、「del_purple()」と指定して関数が呼び出されるようにしています。

const elem_purple = document.getElementById('purple');

削除する「パープル」のp要素（idがpurple）をidから取得します。

elem_purple.remove();

削除する要素自身（elem_purpleの要素。「パープル」のp要素）からremoveメソッドを呼び出して、要素自身を削除します。

※「const」は固定された値である定数を宣言するキーワードです。constキーワードについて、詳しくは解説記事「JavaScriptで書く「var,let,const」の違いと使い分け方法」をご覧ください。

※removeメソッドで削除されたのはブラウザ上でのことであり、Webページの提供元のデータから削除されたわけではありません。削除されてもブラウザの再読み込みで、削除された要素を再び表示できます。

子要素を削除する

子要素を削除したいときは、親要素からremoveChildというメソッドを使うことで削除ができます。

※子要素とは要素の中に入っている要素のことです。たとえば<div><p>子要素</p></div>であればp要素はdiv要素の子要素になり、p要素からみたdiv要素は親要素です。

書式

削除する要素の親要素.removeChild(削除する子要素);

removeChildメソッドの第1引数に削除する子要素を指定します。

子要素を取得するにはchildrenプロパティなどが使えます。

たとえば親要素.children[2]で、3番目の子要素を取得できます。

※childrenプロパティから取得できるのは、複数の値を持つコレクションというデータの集まりです。データには番号（インデックス）がつけられており、最初の要素はchildren[0]で取得します。

※子要素の取得は他の方法でも構いません。たとえば、idで取得するgetElementByIdメソッドでも子要素を取得できます。

サンプルコード

ボタンをクリックするとリストの選んだ子要素（option要素）を削除します。

ソースコード

// 削除する要素の親要素を取得
const parent = document.querySelector('select[name="colorlist"]');

// ボタンがクリックされた時の処理
function del_list() {
    // 選択された要素の番号（インデックス）を取得
    const index = parent.selectedIndex;
    // 削除する子要素を取得
    const del_item = parent.children[index];
    // 選択された子要素を削除
    parent.removeChild(del_item);
};

<select name="colorlist" size="3">
    <option value="red">レッド</option>
    <option value="green">グリーン</option>
    <option value="blue">ブルー</option>
</select>

<button onclick="del_list()">選んだ項目を削除</button>

実行結果

See the Pen
js_remove_child by mentor-inoue-y (@mentor-inoue-y)
on CodePen.

解説

const parent = document.querySelector('select[name="colorlist"]');

削除する項目の親要素（select要素、name属性が「colorlist」）をquerySelectorメソッドで取得します。

function del_list() { ～ });

「選んだ項目を削除」ボタンがクリックされたときに呼び出される関数です。

呼び出し元の要素はHTMLコードのbutton要素で、onclick属性により指定しています。

const index = parent.selectedIndex;

select要素から選択された項目の番号（インデックス）をselectedIndexプロパティで取得します。

インデックスは0から始まるので、Webページが読み込まれた状態だと各インデックスは「レッド」が0、「グリーン」が1、「ブルー」が2です。

const del_item = parent.children[index];

index+1番目（例：indexが1なら上から2番目）の子要素を親要素（select要素、name属性が「colorlist」）からchildrenプロパティで取得します。

たとえば「レッド」が選択されているときはindexが0なので、parent.children[0]となり「レッド」のoption要素がdel_itemに代入されます。

parent.removeChild(del_item);

親要素（select要素）からremoveChildメソッドを呼び出し、リストで選択されたoption要素 del_itemを削除します。

※querySelectorはHTML要素を指定したタグ名などで構成されるセレクタで取得するメソッドです。セレクタについて、詳しくは解説記事「実務で役立つ！CSSのセレクタの種類と使い方【初心者向け】」をご覧ください。

※インデックスとはコレクションや配列などのそれぞれの値につけられた番号のことです。最初のインデックスは0番から始まることに注意してください。

※リストを選択せずにボタンが押された場合はインデックスが-1になるので、本来はエラーにならないように条件分岐の処理が必要です。今回のプログラムではわかりやすくするために省略しています。

[PR] コーディングで副業する方法とは

子要素をすべて削除する

子要素をすべて削除するには、親要素のinnerHTMLプロパティに空文字列 “” を代入します。

※innerHTMLプロパティはHTMLのタグを含んだ文字列で要素の内容を置き換えるときに使用されますが、空文字列（”” または ”）を代入すると要素の内容を消去できます。

※子要素をすべて削除する他の方法として繰り返し処理で子要素をひとつずつ削除したり、HTMLタグを含まない文字列を指定するtextContentプロパティに空文字列を代入したりする方法もあります。

サンプルコード

ボタンをクリックすると、リストの要素（li要素）をすべて削除します。

ソースコード

// 削除する要素の親要素を取得
const parent = document.getElementById('colorlist');

// 「リストを削除」ボタンがクリックされた時の処理
function del_list() {
    // 親要素の内容を空にする
    parent.innerHTML = "";
}

<ul id="colorlist">
    <li>レッド</li>
    <li>グリーン</li>
    <li>ブルー</li>
</ul>

<button onclick="del_list()">リストを削除</button>

実行結果

See the Pen
js_remove_childAll by mentor-inoue-y (@mentor-inoue-y)
on CodePen.

解説

const parent = document.getElementById('colorlist');

削除する項目の親要素（ul要素、idは「colorlist」）をgetElementByIdメソッドで取得します。

function del_list() { ～ });

「リストを削除」ボタンがクリックされたときに呼び出される関数です。

呼び出し元の要素はHTMLコードのbutton要素で、onclick属性により指定しています。

parent.innerHTML = "";

親要素（ul要素）に空文字列を代入することにより、親要素のHTMLコードの内容を空します。

親要素の内容がHTMLタグも含めて空になるので、子要素もなくなります。

【参考】繰り返しによる子要素の削除

繰り返しで子要素を削除する場合は、親要素のfirstChildプロパティにより子要素がある場合は子要素を削除する処理をwhile文で繰り返します。

See the Pen
js_remove_childAll by mentor-inoue-y (@mentor-inoue-y)
on CodePen.

※子要素の内容によってwhile文を使った削除とinnerHTMLを使った子要素の削除で処理速度が違う場合があります。

まとめ

要素の削除を使うことで、Webサイトの表示の一部分を書き換えることができます。

今回紹介した削除の方法で、ひととおりの削除ができるかと思います。

やりたい動作に合わせて、適切なものを選んで使ってください。

内容が分かりやすくて良かったです！

ゆかりちゃんも分からないことがあったら質問してね！

分かりました。ありがとうございます！

JavaScriptを学習中の方へ

これで解説は終了です、お疲れさまでした。

• つまずかず「効率的に」学びたい
• 副業や転職後の「現場で使える」知識やスキルを身につけたい

プログラミングを学習していて、このように思ったことはありませんか？

テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！