第10回 jQuery 1.4編：連載：jQuery逆引きリファレンス（8/17 ページ）

[山田祥寛（http://www.wings.msn.to/），著]

連載目次

　detachメソッドは、要素セット（jQueryオブジェクト）に含まれる内容をドキュメントから削除します。見た目の機能はremoveメソッドとほとんど同じですが、唯一異なるのは、detachメソッドは削除された要素に関連付いたイベント・リスナなどのデータを維持するという点です。

　detachメソッドを利用することで、（例えば）いったん削除した要素セットを削除前の状態そのままに、後からまた挿入するといった処理が可能になります。

　具体的な例も見てみましょう。以下は、<div>要素をクリックされたタイミングで削除する例です。削除された要素は［復帰］ボタンをクリックすることで、文書に再び追加することができます。

<script type="text/javascript">

$(function() {

  // 削除した要素を維持するための変数
  var elem;

  // <div>要素のクリック時に要素を破棄
  $('div').click(function() {
    elem = $(this).detach();
  });

  // ボタン・クリック時に削除した要素を復帰
  $('#btn').click(function() {
    $('body').append(elem);
    elem = null;
  });
});

</script>

  ……中略……

<button id="btn">復帰</button>
<div class="self">本書ではASP.NET MVCを初めて学ぶ人のために、基本的なフレームワークの構造から<i>スキャフォールディング機能、ルーティング、ビューヘルパー</i>...までを包括的に解説します。</div>

リスト137 <div>要素を削除、［復帰］ボタンで再表示する（Detach.html）
このHTMLを実際にブラウザで開く

ブラウザで開く

黄色のテキスト部分をクリック

［復帰］ボタンをクリック

黄色のテキスト部分をクリック

リスト137の実行結果

　detachメソッドで削除された要素をappendメソッドで追加しても、削除前と同様、クリック・イベントが有効であることが確認できます。

　ちなみに、リスト137の「detach()」を「remove()」に変更してみるとどうでしょう。［復帰］ボタンで復帰した<div>要素をクリックしても、<div>要素が消えない（＝クリック・イベントが無効になっている）ことが確認できるはずです。これはdetachメソッドとは違って、removeメソッドでは削除した要素に関連付いたデータ（イベント・ハンドラなど）を維持できないためです。