今回は要素を削除する.remove()の話にも出てきた.empty()ちゃんのお話。
似たようなメソッドの.remove()と比較しながら解説してくよ。
- .empty()
- 指定した要素内を削除する。
.empty()
指定した要素の子要素や中に書かれている内容を削除します。
.remove()とは違い指定した要素自体は残りますが、イベントやハンドラは.remove()と同じで削除されます。
指定した要素ごと削除したい場合は.remove()
イベントやハンドラを残しておきたい場合は.detach()。
をそれぞれ使いましょう。
下記のulを.empty()を使って色々な方法で削除していきます。
|
1 2 3 4 5 6 |
<ul id="hoge"> <li class="hoge-1">リプサム [hoge-1]</li> <li class="hoge-2">リプサム [hoge-2]</li> <li class="hoge-3">NoText [hoge-3]</li> <li class="hoge-4">NoText [hoge-4]t</li> </ul> |
ul内のliを削除する。
|
1 2 3 |
jQuery(function($){ $('#hoge').empty(''); }); |
li内に書かれている内容を削除する。
|
1 2 3 |
jQuery(function($){ $('#hoge li').empty(''); }); |
li.hoge-1の内容を削除
|
1 2 3 |
jQuery(function($){ $('#hoge li.hoge-1').empty(''); }); |
フィルタリング処理
.empty()は.remove()と違い引数がないのでフィルタリングができません。
試しに.remove()の記事の時と同じように絞り込んでみましょう。
class属性で絞り込んでli.hoge-01の内容を削除。
|
1 2 3 |
jQuery(function($){ $('#hoge li').empty('.hoge-1'); }); |
See the Pen empty by sorry (@eitch) on CodePen.20775
(‘:contains(“”)’)を使ってテキストで絞り込んで削除。
|
1 2 3 |
jQuery(function($){ $('#hoge li').empty(':contains("01")'); }); |
See the Pen mevMQY by sorry (@eitch) on CodePen.20775
どれも認識してくれませんね。
こりゃ危険。
.remove()の方が使う機会が多いので勘違いして、あれ？なんてことが無いように。
.empty()した要素を元に戻す
.empty()は.remove()の時のように変数を使っても中身を元に戻すことはできません。
こう見えて.empty()ちゃんは.remove()とは似ても似つかない動きをしてくれます。
.empty()と.remove()の連携
ちなみにですが.remove()の記事で削除した要素を復活させると中身も一緒に復活しましたが、.empty()ちゃんを併用すれば中身を消すことができます。
.remove()で消した要素の中身を消して、ID名とクラス名を残して復活させたい時に使えるやつね。
|
1 2 3 4 5 6 7 |
jQuery(function($){ var removeObj = $('li.hoge-1').remove(); $('li.hoge-2').click(function(){ removeObj.empty(); removeObj.appendTo('ul'); }); }); |
これでli.hoge-2をクリックすると.appendTo()が実行されてli.hoge-1がul内に戻りますが、li.hoge-1に書かれていたテキストは消えています。
See the Pen MaLEYE by sorry (@eitch) on CodePen.20775