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();
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
実際に書いてみよう
それでは要素を削除するコードを、何パターンか実際に書いて動作確認してみましょう。
下記のような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サービス開発を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
