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