Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
jQuery逆引きリファレンス

jQuery逆引きリファレンス

イベントリスナーをそのままに、要素を削除するには?(detach)

2017年2月24日

イベントリスナーを破棄せず維持した状態で要素を削除し、再生成時に元通りにする方法を説明。削除/再生成ではなく、非表示/表示の利用推奨についても言及する。

  • このエントリーをはてなブックマークに追加

 既存の要素を破棄するためのメソッドとして、別稿「TIPS:既存の要素を削除するには?」では、removeメソッドについて解説しました。

 本稿のテーマである「イベントリスナーはそのままに」を明らかにするために、まずは、以下のような例をremoveメソッドを使って実装してみましょう。

  • ボタン(<button id="log">要素)をクリックで、ログを出力
  • ボタンはチェックボックス(<input id="show">要素)によって表示/非表示を切り替えられる

 以下が、その具体的なコードと結果です。

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<label>
  <input id="show" type="checkbox" checked />表示/非表示
</label>
<button id="log" type="button">ログ表示</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function() {
  var button;

  // チェックボックスのオンオフでボタンを破棄/再生成
  $('#show').change(function() {
    if (!this.checked) {
      // 1ボタンを破棄
      button = $('#log').remove();
    } else {
      // 2ボタンを再生成
      $('body').append(button);
    }
  });

  // ボタンクリック時にログ表示
  $('#log').click(function() {
    console.log('ボタンがクリックされました!');
  });
});
</script>
</body>
</html>
ログ出力ボタンを、チェックボックスで表示/非表示する例(detach.html)

 チェックボックスをオフにしたときに、ボタンをremoveメソッドで破棄し(1)、破棄したボタンを一時的に変数buttonに退避させておきます。

 そして、チェックボックスをオンにしたタイミングで、これをappendメソッドで再度ページに書き戻している(=再生成している)わけです。

 この場合、初期状態で動作していたログ出力の機能は、再生成されたボタンでは無効になっていることが確認できます(=ボタンをクリックしてもログが表示されません)。

チェックボックスをオンにすると

チェックボックスをオンにすると……

再生成されたボタンをクリックしてもログは表示されない
再生成されたボタンをクリックしてもログは表示されない

 removeメソッドでは、要素を破棄したタイミングでイベントリスナーを破棄しているわけです。

 では、1detachメソッドで書き換えるとどうでしょう。

JavaScript
button = $('#log').detach();
要素をdetachメソッドで破棄する例(detach.html)
再生成されたボタンでもログが表示された
再生成されたボタンでもログが表示された

 今度は、いったん削除した要素を再生成しても、ログが表示される(=イベントリスナーが維持された)ことが確認できます。

hide/showメソッドも検討を

 本来、頻繁に表示/非表示を切り替えるような要素については、破棄/再生成するのではなく、hideshowメソッドで表示/非表示を切り替えるべきです(以下はその例)。

JavaScript
$('#show').change(function() {
  if (!this.checked) {
    $('#log').hide();
  } else {
    $('#log').show();
  }
});
チェックボックスのオン/オフで要素を表示/非表示する例(detach.html)

 この場合は、要素は非表示になっているだけで、破棄はされませんので、イベントリスナーも維持されます。

 hideshowメソッドでは賄えない(=いったん要素を破棄しなければならない)、しかも、イベントリスナーも維持しなければならないという状況でのみ、detachメソッドを利用してください。

処理対象:要素の削除 カテゴリ:要素
API:.detach()|.remove() カテゴリ:Manipulation(操作) > DOM Removal(DOM削除)

※以下では、本稿の前後を合わせて5回分(第63回~第67回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

jQuery逆引きリファレンス
63. Ajax通信で成功/失敗コールバックに任意の値を渡すには?($.ajax[context])

主にコールバック関数に任意の値を引き渡す目的で使える「$.ajaxメソッドのcontextパラメーター」の基本的な使い方を説明する。

jQuery逆引きリファレンス
64. アニメーションを一時停止するには?(delay)

実行中のアニメーションを途中で一時停止するdelayメソッドの基本的な使い方を説明。delayメソッド特有の問題点も取り上げる。

jQuery逆引きリファレンス
65. 【現在、表示中】≫ イベントリスナーをそのままに、要素を削除するには?(detach)

イベントリスナーを破棄せず維持した状態で要素を削除し、再生成時に元通りにする方法を説明。削除/再生成ではなく、非表示/表示の利用推奨についても言及する。

jQuery逆引きリファレンス
66. 特定のAjax通信でのみグローバルイベントを無効化するには?($.ajax[global])

Ajax通信の開始/終了/成功/失敗のタイミングで任意の処理を差し挟む際に利用するグローバルイベントを、現在の通信だけ対象外にする方法を説明する。

jQuery逆引きリファレンス
67. jQueryを他のライブラリと共存させるには?(jQuery.noConflict)

他のライブラリ導入により「$」や「jQuery」というオブジェクト名が衝突する問題を回避する方法を紹介。別名を定義する方法を2パターン、紹介する。

サイトからのお知らせ

Twitterでつぶやこう!