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

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

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

JavaScriptで要素を削除する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使って初心者向けに解説します。

 

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をみてみましょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptで要素を削除する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

要素、子要素、親要素とは

要素とは、HTMLの開始タグから終了タグまでのひとまとまりのことを指します。

<section>コンテンツ</section>

上記はコンテンツという文字列の内容が含まれたsection要素です。

また、要素は階層によって分かれています。

子要素とは、ある要素から見て、下の階層にあたる要素のことです。

<section>
  <h3>タイトル</h3>
</section>

section要素から見てh3要素は子要素になります。

親要素とは、子要素とは反対にある要素から見て、上の階層にあたる要素のことです。

<main>
  <section>コンテンツ</section>
</main>

section要素から見た場合、main要素が親要素になります。

逆にmain要素から見た場合には、section要素は子要素です。

 

jQueryを使わずに要素を削除する方法

jQueryを使わずに要素を削除する場合、removeメソッドを使いましょう。

document.getElementByIdなどで要素を取得し、その要素に対してremoveメソッドを呼び出します。

そうすることで、HTMLからその要素が削除されます。

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

jQueryで要素を削除する方法

jQueryで要素を削除するには、こちらもremoveメソッドを使用します。

$()のカッコの中にセレクタを記述し、要素を取得してください。

その要素に対してremoveメソッドを呼び出しましょう。

jQueryを使わずに削除する方法と手順は同じです。

 

実際に書いてみよう

それでは要素を削除するコードを実際に書いてみましょう。

下記のようなHTMLを用意します。

<main>
  <section>
    <h3>タイトル</h3>
  </section>
</main>

まずは、jQueryを使わずに要素を削除してみます。

const element = document.querySelector('section')
element.remove()

これでsection要素を削除することができました。

 

次に、jQueryを使って要素を削除します。

$('section').remove()

こちらもsection要素を削除することができました。

執筆してくれたメンター

メンター久保田

Webシステム開発が中心のシステムエンジニア。

HTML、CSS、JavaScript(React、Vue.js)、PHP、Javaが守備範囲。最初に選ぶポケモンは炎タイプ。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

 

TechAcademyでは、初心者でも最短4週間で、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので参加してみてください。