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();
実は私も！？独学で損する人の特徴
「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ
独学には向き不向きがあり、実はスクールが向いている人も大勢います。
そんな方のために参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
- ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
- ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った
少しでも当てはまる部分があれば、
スクールが向いているかもしれません。
お試しのつもりで、まずは一度
無料体験
に参加してみませんか？
初心者でも最短1時間で学習が体験できるカリキュラム、現役エンジニアに何でも相談できるカウンセリング、無制限のチャット質問サービス
が
すべて無料で体験
できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
実際に書いてみよう
それでは要素を削除するコードを、何パターンか実際に書いて動作確認してみましょう。
下記のような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週間限定）
