jQuery中empty&&remove&&detach三种方法的区别
empty():移除指定元素内部的所有内容,但不包括它本身
remove():移除指定元素内部的所有内容,包括它本身,所有绑定的事件、附加的数据等都会删除
detach():临时删除页面上的所有元素包括它本身,所有绑定的事件、附加的数据等都会保留下来
官方解读:这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。
$("div").detach()这一句会移除对象，仅仅是显示效果没有了。但是内存中还是存在的。当你append之后，又重新回到了文档流中。就又显示出来了。
哈哈哈!举的例子,更加明确
注:如有错误请联系本人更改或者删除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>detach&&remove&&empty三种方法演示</title>
<script src="../jQuery库/jquery-3.3.1.js"></script>
<style>
.DETACH,
.REMOVE,
.EMPTY{
300px;
height: 166px;
border: 5px solid #ccc;
}
.DETACH_DIV,
.REMOVE_DIV,
.EMPTY_DIV{
300px;
height: 120px;
border: 3px solid pink;
box-sizing: border-box;
}
</style>
</head>
<body>
<!-- empty方法演示块 -->
<div class="EMPTY">
<div class="EMPTY_DIV">
<h1>小麦王</h1>
<p>这是小麦王啤酒</p>
</div>
<input id="bt1" type="button" value="点击删除这中的class=EMPTY_DIV中的元素">
</div>
<script>
$("#bt1").on("click",function(){
$(".EMPTY_DIV").empty();
});
</script>
<!-- remove方法演示块 -->
<div class="REMOVE">
<div class="REMOVE_DIV">
<h1>哈尔滨</h1>
<p>哈尔滨啤酒</p>
</div>
<input id="bt2" type="button" value="点击删除这里的class=REMOVE_DIV中的元素">
</div>
<script>
$("#bt2").on("click",function(){
$(".REMOVE_DIV").remove();
});
</script>
<!-- detach方法演示块 -->
<div class="DETACH">
<div class="DETACH_DIV">
<h1>雪花</h1>
<p>雪花啤酒</p>
</div>
<input id="bt3" type="button" value="点击删除这里的class=DETACH_DIV中的元素">
<input id="bt4" type="button" value="点击还原class=DETACH_DIV中的元素">
</div>
<script>
$("#bt3").on("click",function(){
p = $(".DETACH_DIV").detach();
});
$("#bt4").on("click",function(){
$(".DETACH").prepend(p);
});
</script>
</body>
</html>