【jQuery】remove()を使って指定した要素を削除する!

指定した要素を削除するにはjQueryのremove()メソッドを使用します。

jQueryのremove()メソッドとはHTML要素を削除するメソッドであり、ボタンを押した時などのイベント時に要素を削除する場合や、条件の結果次第で要素を削除する場合に使用されます。

また、要素を削除するメソッドはremove()メソッド以外にempty()メソッドがあり、削除の方法が少し異なりますので注意してください。

今回は、jQueryのremove()メソッドを使って要素を削除する方法について以下の内容で解説していきます。

⚫︎ 指定した要素内を全て削除する場合
⚫︎ 特定の要素を指定して削除する場合
⚫︎ 複数の要素を指定して削除する場合

⚫︎ jQueryを使用せずに指定した要素を削除する場合

⚫︎ remove()とempty()の違い

ハルトさん

今回はjQueryのremove()メソッドについて説明していきます。

さとみさん

お願いします!

remove()とは

remove()とは、HTML要素を削除するメソッドとなります。

remove()の書き方

remove()メソッドの書き方は下記となります。

$の()に要素を指定することで、指定した要素を削除することができます。

また、remove()の引数に削除したい要素を指定することで、$の()で指定した要素の中にある要素のみを削除することができます。

指定する要素は<div>のようなタグ名やクラス名、id名でも構いません。

指定した要素を削除するサンプルコード

指定した要素を削除するサンプルコードを紹介します。

指定した要素内を全て削除する場合

指定した要素内を全て削除する場合はremove()を引数無しで使用します。

sample.html

index.js

出力結果

remove()を引数無しで使用することで$()で指定した要素内の要素を全て削除します。
ボタンを押すと、指定したfooクラス内の要素が全て削除されています。

特定の要素を指定して削除する場合

特定の要素を指定して削除する場合はremove()の引数に削除したい要素を指定します。

sample.html

index.js

出力結果

remove()の引数に削除したい要素を指定することで、特定の要素を指定して削除します。
そのため、ボタンを押すと、指定した.fooクラスの中にある.foo_h2クラス要素が削除されています。

複数の要素を指定して削除する場合

複数の要素を指定して削除する場合はremove()の引数に削除したい要素を,(カンマ)で区切って指定します。

sample.html

index.js

出力結果

remove()の引数に削除したい要素を,(カンマ)で区切って指定することで、複数の要素を削除します。
そのため、ボタンを押すと、指定した.fooクラスの中にある.foo_h2クラスと.foo_pクラスの要素が削除されています。

jQueryを使用せずに指定した要素を削除する場合

jQueryを使用せずに純粋なJavaScriptで指定した要素を削除してみます。

sample.html

index.js

出力結果

純粋なJavaScritを使用し、指定した要素を削除しています。

remove()とempty()の違い

要素を削除するメソッドはremove()の他にempty()というものがあります。
この2つのメソッドは要素を削除するメソッドということから同じように思えますが、少し動きが以下のように異なります。

⚫︎ remove():
指定した要素の全体を削除するメソッド(後型もなく削除される)

⚫︎ empty():
指定した要素の中身を削除するメソッド(中身だけ削除され、要素自体は削除されず、タグが残る)

さとみさん

empty()のタグが残るというのは、中身が結局削除されるからremove()とそんなに変わらないんじゃないですか?

ハルトさん

そのようにも見えますよね。
例えば、削除する要素にCSSが適用されていたら、remove()では完全に削除されますが、empty()では、CSSは残ってしまいます。

さとみさん

そうなんですね。
empty()は要素自体を削除するわけではないので、要素にCSSを適用させていた場合はタグが残っているから表示されることになるんですね。

ハルトさん

そうです。
それではここで、remove()とempty()を使用した時のサンプルコードを見て見ましょう。

さとみさん

それのサンプルコードは分かりやすそうです!
ぜひ、お願いします!

sample.html

style.css

index.js

出力結果

remove()の場合は、removeクラス全体が削除されるため、divタグ内の要素が跡形なく削除されています。
しかし、empty()の場合は、emptyクラスの中身が削除されるため、divタグが残ることから枠線は表示されます。

クリックボタンを押した後のsample.html

さとみさん

確かに、remove()の方は何も残っていませんけど、empty()の方はCSSタグが残ってますね!

ハルトさん

そうですよね。
これがremove()とempty()を使用した時の違いとなります。

今回のポイント

remove()メソッドで要素を削除する

⚫︎ 要素を削除するにはjQueryのremove()メソッドを使用する

⚫︎ remove()メソッドで指定した要素を削除するには$の()に要素を指定する

⚫︎ 指定した要素内を全て削除する場合はremove()を引数無しで使用する

⚫︎ 特定の要素を指定して削除する場合はremove()の引数に削除したい要素を指定する

⚫︎ 複数の要素を指定して削除する場合はremove()の引数に削除したい要素を,(カンマ)で区切って指定する

⚫︎ remove()は要素全体を削除するがempty()は要素の中身を削除する
(remove()の場合はタグごと削除し、empty()の場合はHTML要素のみを削除しタグは残る)

Writer
壷井

壷井

株式会社flyhawkの壷井です。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語:swift、JS系(Node.js等)。好きなサーバー:AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。

最新の案件情報

フリーランスエンジニアの案件探し