JavaScriptで要素を削除する方法を現役エンジニアが解説【初心者向け】
初心者向けにJavaScriptで要素を削除する方法について現役エンジニアが解説しています。JavaScriptでHTML要素を削除するには、要素オブジェクトを取得した後にremoveメソッドを使います。jQueryでもセレクタを指定した後にremoveメソッドを使います。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
JavaScriptで要素を削除する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
目次
そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。
今回は、JavaScriptに関する内容だね！
どういう内容でしょうか？
JavaScriptで要素を削除する方法について詳しく説明していくね！
お願いします！
要素、子要素、親要素とは
要素とは、HTMLの開始タグから終了タグまでのひとまとまりのことを指します。
<section>コンテンツ</section>
上記はコンテンツという文字列の内容が含まれたsection要素です。
また、要素は階層によって分かれています。
子要素とは、ある要素から見て、下の階層にあたる要素のことです。
<section>
<h3>タイトル</h3>
<p>内容</p>
</section>
section要素から見てh3要素は子要素です。
さらにp要素はh3要素からは子要素、section要素からは孫要素です。
親要素とは、子要素とは反対にある要素から見て、上の階層にあたる要素のことです。
<main> <section>コンテンツ</section> </main>
section要素から見た場合、main要素が親要素です。
逆にmain要素から見た場合には、section要素は子要素です。
jQueryを使わずに要素を削除する方法
jQueryを使わずに要素を削除する場合、removeメソッドを使いましょう。
ID名称から要素を取得する場合はdocument.getElementById、タグやクラス名称などから要素を取得する場合はdocument.querySelectorなどを使い、利用要素を取得し、その要素に対してremoveメソッドを呼び出します。
そうすることで、HTMLからその要素が削除されます。
下記HTMLを準備してみましょう。
<main>
<section id='title'>
<h3>タイトル</h3>
<p>内容</p>
</section>
</main>
下記、どちらの処理でもHTML要素を削除することができます。
//document.getElementByIdを使う場合
const element = document.getElementById('title');
element.remove();
//document.querySelectorを使う場合
const element = document.querySelector('section');
element.remove();
jQueryで要素を削除する方法
jQueryで要素を削除するには、こちらもremoveメソッドを使用します。
$()のカッコの中にセレクタを記述し、要素を取得してください。
その要素に対してremoveメソッドを呼び出しましょう。
$(セレクター).remove();
実際に書いてみよう
それでは要素を削除するコードを、何パターンか実際に書いて動作確認してみましょう。
下記のようなHTMLを用意します。
<head>
<title>SAMPLE</title>
</head>
<body>
<input type='button' id='deleteBtn1' value='タイトル1削除'>
<input type='button' id='deleteBtn2' value='タイトル2削除'>
<input type='button' id='deleteBtn3' value='タイトルすべて削除'>
<main>
<section id='section1' class='sections'>
<h3>タイトル1</h3>
<p>内容１<p/>
</section>
<section id='section2' class='sections'>
<h3>タイトル2</h3>
<p>内容２<p/>
</section>
<section id='section3' class='sections'>
<h3>タイトル3</h3>
<p>内容３<p/>
</section>
</main>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
/*タイトル1削除クリック時*/
document.querySelector('#deleteBtn1').addEventListener('click', () => {
const element = document.getElementById('section1');
element.remove();
});
/*タイトル2削除クリック時*/
document.querySelector('#deleteBtn2').addEventListener('click', () => {
$('#section2').remove();
});
/*タイトルすべて削除クリック時*/
document.querySelector('#deleteBtn3').addEventListener('click', () => {
$('.sections').remove();
});
</script>
ボタンをクリックすることで、scriptに記載した処理が動作し、HTML要素を削除できたかと思います。
一つの要素を削除する場合は1つ目、2つ目のボタンのようにID名から要素を取得し、複数の要素を一度に削除する場合は、3つ目のボタンのようにクラス名から要素を取得し削除できます。
HTMLの要素を削除したり追加することで、SPA(Single Page Application)というWebの表示切替ごとに、URL遷移しないWebサイト・アプリを作成できますので、ぜひこの機会にJavaScriptによるHTML要素の削除の実装を覚えてみましょう。
執筆してくれたメンター
| 永井 浩平（ナガイ コウヘイ）
バックエンド、フロント、クラウドなど幅広い業務を行ってきました。 |
JavaScriptで要素を削除する方法がよくわかったので良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
JavaScriptを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
プログラミングを学習していて、このように思ったことはありませんか？
テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
