<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("イベント実行！")
});
External CSS
This Pen doesn't use any external CSS resources.