.remove()と似たような動きだけどちょっと違う.detach()のお話。
.remove()と比較しながら解説していきましょう。
- .detach( [セレクタ] )
- 指定した要素に関連するイベントを残したまま、子要素や内容ごと指定した要素を削除する。
.detach()
要素を削除するという点では.remove()と同じですが、.remove()と違うのは削除してもイベントやハンドラを保持しているという点。
.remove()の記事にありますが、.remove()では変数を使えば削除した要素を復元することができましたが、イベントなどは消えたままでした。
.detach()ならそのイベントやハンドラを保持したまま元に戻せるのです。
子要素もしくは内容のみを削除したい場合は.empty()。
削除した後に復活させないのであれば.remove()。
をそれぞれ使いましょう。
まずはいつもどおり下記のulを色々な方法で消していきましょう。
|
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').detach(''); }); |
ulを残してliを全て削除。
|
1 2 3 |
jQuery(function($){ $('#hoge li').detach(''); }); |
li.hoge-1を削除。
|
1 2 3 |
jQuery(function($){ $('#hoge li.hoge-1').detach(''); }); |
これで.remove()と同じ動きをしてくれます。
だからと言って.detach()を乱用するのではなく要素の削除には.remove()で、削除した要素を復元する時には.detach()を使いましょう。
フィルタリング処理
.empty()では使えませんでしたが、.detach()ではギャンギャン使えます。
早速.remove()の時と同じように試してみましょう。
|
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> |
class属性で絞り込んでli.hoge-01を削除。
|
1 2 3 |
jQuery(function($){ $('#hoge li').remove('.hoge-1'); }); |
(‘:contains(“”)’)を使ってテキストで絞り込んで削除。
|
1 2 3 |
jQuery(function($){ $('#hoge li').remove(':contains("リプサム")') }); |
これでリプサムと書かれているliのみを削除できます。
See the Pen remove by sorry (@eitch) on CodePen.20775
.remove()と.detach()の比較
.remove()と.detach()を同じ書き方で比較してみましょう。
クリックイベントで比較
まずはクリックして削除するだけで試してみましょう。
|
1 2 3 |
$('li.hoge-1').click(function(){ $("ul#hoge")****(); }); |
[hoge-1]をクリックするとulが消えるようにしました。
****の部分にはdetachかremoveがそれぞれ入ります。
.detach()の場合
|
1 2 3 |
$('li.hoge-1').click(function(){ $("ul#hoge").detach(); }); |
See the Pen detach by sorry (@eitch) on CodePen.20775
.remove()の場合
|
1 2 3 |
$('li.hoge-1').click(function(){ $("ul#hoge").remove(); }); |
See the Pen remove by sorry (@eitch) on CodePen.20775
同じ動きですね。
次は消す要素にイベントを入れておいてから、削除・復元をしてみましょう。
jQueryはこんな感じに書きます。
|
1 2 3 4 5 6 7 8 9 10 |
jQuery(function($){ $('li.hoge-1').click(function(){ $(this).css('background' , '#F00'); }); var ****Obj = $('li.hoge-1').****(); $('li.hoge-2').click(function(){ ****Obj.appendTo('ul'); }); }); |
****の部分にはdetachかremoveがそれぞれ入ります。
2行目～4行目で[hoge-1]をクリックすると、背景が赤くなるイベントを入れます。
6行目で変数を使ってli.hoge-1を削除。
7行目～8行目で[hoge-2]をクリックしてli.hoge-1を復活させます。
これをdetachとremoveでそれぞれ試してみます。
下記のボックス内の[hoge-2]をクリックして[hoge-1]を復活したさせてから、[hoge-1]をクリックしてみましょう。
.detach()の場合
See the Pen remove by sorry (@eitch) on CodePen.20775
.remove()の場合
See the Pen remove by sorry (@eitch) on CodePen.20775
上記で比較すると.remove()では復元したli.hoge-1をクリックしても背景色が変わらないのに対して、.detach()では復元した後もクリックイベントが残っててli.hoge-1の背景色が変わりますね。
まあなんと言うか、.detach()とはそうゆうことです(笑)
でも頻繁に出したり引っ込めたりする場合は.detach()ではなく、CSSでdisplay:noneを追加して消す方法の方がいいでしょう。