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

初心者向けにJavaScriptでDOM操作で要素を削除する方法について現役エンジニアが解説しています。DOMとはドキュメントオブジェクトモデルの略で、HTMLの文書構造を表すものです。JavaScriptでHTMLやタグを操作することが出来ます。要素を削除するには、removeChild()などのメソッドを使います。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

JavaScriptでDOM操作で要素を削除する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使って初心者向けに解説します。

 

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

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

大石ゆかり

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

田島悠介

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

大石ゆかり

お願いします!

 

目次

  1. DOMとは
  2. DOMの使い方
  3. 特定の子要素を削除する方法
  4. 子要素を全て削除する方
  5. 自分を削除する方法
  6. 実際に書いてみよう
  7. まとめ

 

DOMとは

ドキュメントオブジェクトモデルの略で、文章の構造を現すものです。

ブラウザでみているWebサイトは、HTMLという言語のタグを使って文章のレイアウトや表示の色などを表現しています。DOMの中にはこのTMLの要素を操作する機能も用意されています。これにより、Webサイトの表示を切り替えたり色をつけたりというような動きをもたせることができます。

平たくまとめると、DOMとはHTMLの要素やそれらを操作する機能の集まりということになります。
 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

DOMの使い方

各ブラウザは、DOMが実装されているので特に準備は必要ありません。

JavaScriptでDOMを使ってWebサイトの見た目などを操作する場合は、画面を現すwindowや、そのプロパティのdocumentという標準で入っているオブジェクトを介して処理をすることになります。

例えば、HTMLのdivタグを取得する場合は下記のようにdocumentオブジェクトのgetElementsByTagNameというメソッドを使います。

document.getElementsByTagName('div');

 

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

removeChildというメソッドを使うことで削除ができます。

第1引数に削除する子要素を指定します。
 

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

いくつか方法がありますが、楽な記述なのは親要素のinnerHTMLというプロパティに”(シングルクォート2つで空文字を意味します)を設定することです。

これにより、親要素の中のHTMLタグやテキストなどの中身が空になり、結果として削除されることになります。
 

自分を削除する方法

removeというメソッドを使うことで削除ができます。削除したい要素に.remove()と記述してください。
 

実際に書いてみよう

削除の操作をおこなうために、divタグに子のdivタグが3つ入ったものを用意しました。
下記がHTMLのソースです。

<div id='parent'>
  <div>1番目</div>
  <div>2番目</div>
  <div>3番目</div>
</div>

次にJavaScriptで上で紹介した3つの削除をおこないます。

let parent = document.getElementById('parent');

parent.removeChild(parent.children[1]); //2番目の子要素を削除

parent.innerHTML = ''; //子要素を全て削除

parent.remove(); //自身を削除

 

解説

getElementByIdは、HTMLにidが指定されたものを取得します。

ここではHTMLの親のdivタグにparentというidを指定しているので、それを取得しています。取得したdivタグに対し、childrenとすることで子要素のリストを参照できます。

リストの番号は0から始まるので、2番目のdivは[1]となっています。
 

まとめ

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

今回紹介した削除の方法で、ひととおりの削除ができるかと思います。やりたい動作に合わせて、適切なものを選んで使ってください。
 

筆者プロフィール

横山茂雄(よこやましげお)

フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。

言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

 

TechAcademyでは、初心者でも最短4週間で、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。