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

初心者向けにJavaScriptで要素を削除する方法について現役エンジニアが解説しています。JavaScriptでHTML要素を削除するには、要素オブジェクトを取得した後にremoveメソッドを使います。jQueryでもセレクタを指定した後にremoveメソッドを使います。

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

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();

 

[PR] フロントエンドで挫折しない学習方法を動画で公開中

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>内容1<p/>
    </section>
    <section id='section2' class='sections'>
     <h3>タイトル2</h3>
       <p>内容2<p/>
    </section>
    <section id='section3' class='sections'>
     <h3>タイトル3</h3>
       <p>内容3<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要素の削除の実装を覚えてみましょう。

 

執筆してくれたメンター

永井 浩平(ナガイ コウヘイ)

バックエンド、フロント、クラウドなど幅広い業務を行ってきました。
DB全般とspring(Java)、フロント系言語が得意分野です。現在はBtoBtoC事業を行っている会社で
社内SEとして勤務している傍
テックアカデミーのフロントエンドコース・Javaコースのメンターとして活動しています。

大石ゆかり

JavaScriptで要素を削除する方法がよくわかったので良かったです!

田島悠介

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

大石ゆかり

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

 

JavaScriptを学習中の方へ

これで解説は終了です、お疲れさまでした。

  • つまずかず「効率的に」学びたい
  • 副業や転職後の「現場で使える」知識やスキルを身につけたい

プログラミングを学習していて、このように思ったことはありませんか?

テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします!