jQuery逆引きリファレンス
イベントリスナーをそのままに、要素を削除するには？（detach）
イベントリスナーを破棄せず維持した状態で要素を削除し、再生成時に元通りにする方法を説明。削除／再生成ではなく、非表示／表示の利用推奨についても言及する。
既存の要素を破棄するためのメソッドとして、別稿「TIPS：既存の要素を削除するには？」では、removeメソッドについて解説しました。
本稿のテーマである「イベントリスナーはそのままに」を明らかにするために、まずは、以下のような例をremoveメソッドを使って実装してみましょう。
- ボタン（
<button id="log">要素）をクリックで、ログを出力 - ボタンはチェックボックス（
<input id="show">要素）によって表示／非表示を切り替えられる
以下が、その具体的なコードと結果です。
|
<!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>
|
チェックボックスをオフにしたときに、ボタンをremoveメソッドで破棄し（1）、破棄したボタンを一時的に変数buttonに退避させておきます。
そして、チェックボックスをオンにしたタイミングで、これをappendメソッドで再度ページに書き戻している（＝再生成している）わけです。
この場合、初期状態で動作していたログ出力の機能は、再生成されたボタンでは無効になっていることが確認できます（＝ボタンをクリックしてもログが表示されません）。
チェックボックスをオンにすると……
removeメソッドでは、要素を破棄したタイミングでイベントリスナーを破棄しているわけです。
では、1をdetachメソッドで書き換えるとどうでしょう。
|
button = $('#log').detach();
|
detachメソッドで破棄する例（detach.html）
今度は、いったん削除した要素を再生成しても、ログが表示される（＝イベントリスナーが維持された）ことが確認できます。
hide／showメソッドも検討を
本来、頻繁に表示／非表示を切り替えるような要素については、破棄／再生成するのではなく、hide／showメソッドで表示／非表示を切り替えるべきです（以下はその例）。
|
$('#show').change(function() {
if (!this.checked) {
$('#log').hide();
} else {
$('#log').show();
}
});
|
この場合は、要素は非表示になっているだけで、破棄はされませんので、イベントリスナーも維持されます。
hide／showメソッドでは賄えない（＝いったん要素を破棄しなければならない）、しかも、イベントリスナーも維持しなければならないという状況でのみ、detachメソッドを利用してください。
API：.detach()｜.remove() カテゴリ：Manipulation（操作） > DOM Removal（DOM削除）
※以下では、本稿の前後を合わせて5回分（第63回～第67回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
63. Ajax通信で成功／失敗コールバックに任意の値を渡すには？（$.ajax［context］）
主にコールバック関数に任意の値を引き渡す目的で使える「$.ajaxメソッドのcontextパラメーター」の基本的な使い方を説明する。
65. 【現在、表示中】≫ イベントリスナーをそのままに、要素を削除するには？（detach）
イベントリスナーを破棄せず維持した状態で要素を削除し、再生成時に元通りにする方法を説明。削除／再生成ではなく、非表示／表示の利用推奨についても言及する。
66. 特定のAjax通信でのみグローバルイベントを無効化するには？（$.ajax［global］）
Ajax通信の開始／終了／成功／失敗のタイミングで任意の処理を差し挟む際に利用するグローバルイベントを、現在の通信だけ対象外にする方法を説明する。
67. jQueryを他のライブラリと共存させるには？（jQuery.noConflict）
他のライブラリ導入により「$」や「jQuery」というオブジェクト名が衝突する問題を回避する方法を紹介。別名を定義する方法を2パターン、紹介する。
