JavaScriptでDOM操作で要素を削除する方法を現役エンジニアが解説【初心者向け】
初心者向けにJavaScriptでDOM操作で要素を削除する方法について現役エンジニアが解説しています。DOMとはドキュメントオブジェクトモデルの略で、HTMLの文書構造を表すものです。JavaScriptでHTMLやタグを操作することが出来ます。要素を削除するには、removeChild()などのメソッドを使います。
TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。
JavaScriptでDOM操作で要素を削除する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。
JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。
なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。
今回は、JavaScriptに関する内容だね！
どういう内容でしょうか？
JavaScriptでDOM操作で要素を削除する方法について詳しく説明していくね！
お願いします！
目次
DOMとは
ドキュメントオブジェクトモデルの略で、文章の構造を現すものです。
ブラウザでみているWebサイトは、HTMLという言語のタグを使って文章のレイアウトや表示の色などを表現しています。DOMの中にはこのTMLの要素を操作する機能も用意されています。これにより、Webサイトの表示を切り替えたり色をつけたりというような動きをもたせることができます。
平たくまとめると、DOMとはHTMLの要素やそれらを操作する機能の集まりということになります。
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では、初心者でも、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
