jQuery｢remove｣で要素を削除する

2020年4月23日

jQueryのメソッド「.remove()」は、指定した要素を削除する事ができるメソッド。

今回は、jQueryで「指定した要素を削除できる」メソッド「.remove()」について、その使い方をサンプルを交えて解説しよう。

.empty()との違い

要素を削除するメソッドには、.empty()というメソッドもある。何が違うかと言うと、.empty()は指定した要素の中身だけを削除するメソッドであるのに対して、remove();は指定した要素そのものを削除するメソッドであるという違いだ。

.remove()の構文

$("セレクタ").remove();

これで、セレクタで指定した要素そのものを、シンプルに削除する事ができる。指定した要素に子要素があった場合は、中身の子要素も同時に削除される点も認識しておこう。

jQueryで.remove()を使って、指定要素を削除する例

jQuery

$(function(){
 $(".box p").remove();
});

HTML （jQuery反映前）

<div class="box">
 <p>元の要素</p>
 <p><span>元の要素</span></p>
 <p><span>元の要素</span></p>
</div>

HTML （jQuery反映後）

<div class="box">
</div>

このように書く事で$(".box p")というセレクタで指定した複数のpを全て事する事ができる。もちろんpの子要素もすべて削除されるので、注意しておこう。

以上、jQueryで「.remove()を使って、指定要素を削除する」方法でした。

その他のjQueryメソッドについて確認したい方は、jQueryメソッドを一覧で解説したこちらの記事を確認しておこう！

▶ jQueryの「メソッド一覧」と使い方

jQueryの沢山あるメソッドの一覧を解説してほしいjQueryのメソッド一覧を確認して、jQueryを自由に操れるよ…

フロントエンドスキルをもっと早く・簡単にマスターしたい方へ！

JavaScriptやCSS・Sassなどフロントエンド学習は、初心者が「独学」で完全マスターするには半年以上かかり、相当根気よくやらないと挫折してしまうか、ライバルに出遅れてしまう…。

短期間でフロントエンド・WEBデザインをマスターするには？

私の経験だが、手軽なオンラインスクールを利用した方が圧倒的に早かった。独学だと「何からどこまで勉強すれば良いかわからない」ものを、これだけ学習すればOKというポイントをおさえた教科書で学習しながら、わからない点を質問し放題なので、多少の出費は必要だが２ヶ月程度でサクッと学べたので逆に経済的だった！（実際に私がオンラインスクールを受講して体感）

では「オススメはどのスクール？」とよく聞かれるのだが、たった１つのおすすめスクールがある訳でなく、その人によって最適なスクールが違う。

スクール選びのポイント