本記事では、jQueryで要素を削除してもデータやイベント情報は残すことができるdetachメソッドの使い方とremoveメソッドとの違いについて解説しています。
JavaScriptの学習におすすめ書籍
1冊ですべて身につくJavaScript入門講座
メリット
- 誰でも分かるように嚙み砕いて説明してくれる
- アニメーションの知識が深く学べる
- 1つのWebサイトを作りながら学べる
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
全プログラマー必見！
変数名/関数名にもう悩まない！
変数名/関数名にもう悩まない！
リーダブルコード
メリット
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 （2023/07/23 02:48時点 | Amazon調べ）
ポチップ
目次
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("イベント実行！")
});
