jQuery

【jQuery】要素を削除してもイベント情報は残す方法(detach)

本記事では、jQueryで要素を削除してもデータやイベント情報は残すことができるdetachメソッドの使い方とremoveメソッドとの違いについて解説しています。

jQueryの学習におすすめ参考書
jQuery最高の教科書

本書情報
著者株式会社シフトブレイン
発売日2013/11/26
ページ数320ページ
Kindle版
レビュー
(Amazon)
(93件)

参考書が苦手な人はUdemyの動画がおすすめ
即実践 手を動かして6時間でjQueryをマスターしよう。
知識、経験ゼロからjQueryを使いこなそう

動画情報
作成者村守 康
学習時間6時間
受講者数28,547人
レビュー (425件)
動画の詳細はこちら

detachメソッドでイベント情報を残す

jQueryで対象要素を削除する方法と言えば、removeメソッドが有名です。しかし、removeメソッドで削除された要素は関連付いているデータやイベントも一緒に削除します。そのため、removeメソッドで削除された要素を復元して再利用しようとしても、削除前に関連付いていたデータは全て消えてしまうため再利用することは難しいです。

このような一度削除はするけど、後々復元して再利用するかもしれない!という場面ではremoveメソッドではなくdetachメソッドを使います。detachメソッドでは、削除した要素に関連付いてるデータやイベント情報は消えずに残ります。

detachメソッドの使い方は以下のとおりです。

$("対象要素").detach();

使い方はremoveメソッドと同じで、削除したい対象の要素に対してdetachメソッドを使います。

detachメソッドで削除した要素を復元しイベント情報が残っているか確認できるサンプルコードは以下のとおりです。

<div>
  <div class="box box1">BOX1</div>
  <div class="box box2">BOX2</div>
  <div class="box box3">BOX3</div>
</div>
<button id="del">BOXを削除する</button>
<button id="res">BOXの復元</button>
<div id="ape"></div>
div{
  display:flex;
}

.box {
  display:flex;
  justify-content: center;
  align-items: center;
  width:150px;
  height:150px;
  font-weight:bold;
  cursor:pointer;
}

.box + .box{
  margin-left:15px;
}

.box1{
  background:#f00;
}

.box2{
  background:#0f0;
}

.box3{
  background:#00f;
}
let eventElem;
$("#del").on("click",function(){
  eventElem = $(".box").detach();
});

$("#res").on("click",function(){
  $("#ape").append(eventElem);
});

$(".box").on("click",function(){
  $(this).text("イベント実行!")
});

BOXを削除するボタンをクリックすると、表示されているBOXが全て削除されます。その後にBOXの復元ボタンをクリックすると削除されたBOXが復元されます。BOXにはクリックイベントを登録しており、クリックするとテキストが「イベント実行!」に書き変わります。

detachメソッドでは、イベント情報が残った状態で要素が削除されるためイベントが動作することが確認できます。それでは、続いてremoveメソッドで削除した要素を復元して確認してみましょう。

let eventElem;
$("#del").on("click",function(){
  eventElem = $(".box").remove();
});

復元されたBOXをクリックしてもテキストが変わらないことが確認できます。

detachメソッドとremoveメソッドは要素を削除するという用途は同じですが、このような違いがあります。データやイベント情報を残したい場合はdetachメソッドを、完全に要素を削除しても問題ない場合はremoveメソッドを使いましょう。

jQuery削除メソッド一覧

jQuery 要素削除一覧
unwrap親要素の削除
remove対象要素の削除
empty子要素の削除
detachデータやイベント情報を残したまま対象要素の削除

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村