第10回 jQuery 1.4編連載:jQuery逆引きリファレンス(8/17 ページ)

» 2010年08月27日 00時00分 公開



「連載:jQuery逆引きリファレンス」のインデックス

連載目次


 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メソッドでは削除した要素に関連付いたデータ(イベント・ハンドラなど)を維持できないためです。

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。