【jQuery】empty()を使って要素の内容を空にする!

指定した要素の内容を空にするにはjQueryのempty()メソッドを使用します。

jQueryのempty()メソッドとはHTML要素の内容を空にするメソッドであり、ボタンを押した時などのイベント時に要素の内容を空にする場合に使用されます。

しかし、要素の内容を空にするという事は、HTML要素の内容が削除されますが、タグは残るようになるということになります。
その為、要素自体を完全に削除する事はできませんので注意してください。

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

ハルトさん

今回はjQueryのempty()メソッドで要素の内容を空にする方法について解説していきます。

さとみさん

はい!
お願いします!

empty()とは

empty()とは、HTML要素の内容を空にするメソッドとなります。

empty()の書き方

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

$の()にセレクタを指定することで、指定したセレクタの内容を空にすることができます。

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

指定した要素の内容を空にするサンプルコード

指定した要素の内容を空にするサンプルコードを紹介します。

sample.html

index.js

出力結果

empty()を使用することで$()で指定したセレクタ内の要素の内容を空にします。
その為、ボタンを押すと、指定したtdタグ内の要素が全て削除されています。

empty()とremove()の違い

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

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

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

さとみさん

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

ハルトさん

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

さとみさん

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

ハルトさん

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

さとみさん

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

sample.html

style.css

index.js

出力結果

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

remove()メソッドについて詳しく知りたい場合はこちらご参考ください。

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

さとみさん

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

ハルトさん

そうですよね。
これがempty()とremove()を使用した時の違いとなります。
もぢ、要素を完全に削除したい場合はempty()ではなく、remove()を使用しましょう。

今回のポイント

empty()メソッドで要素の内容を空にする

⚫︎ 要素の内容を空にするにはjQueryのempty()メソッドを使用する

⚫︎ empty()メソッドで指定した要素の内容を空にするには$の()にセレクタを指定する

⚫︎ empty()は要素の中身を削除するが、remove()は要素全体を削除する
(empty()の場合はHTML要素の内容のみを削除する為タグは残るが、remove()の場合はタグごと削除する為何も残らない)

Writer
壷井

壷井

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

最新の案件情報

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