jquery中detach()和remove()区别
1、定义区别
remove()方法 : 把被选中元素删除(包括事件);
detach()方法: 把被选中元素删除,当把元素在添加到body中时,原先的事件还会保留。
2、使用区别
remove()方法:删除元素之后除了元素自身保留下来外,其他的比如绑定的事件,附加的数据等都会被删除。
detach()方法:删除元素可以在将来再使用,且所有绑定的事件、附加的数据等都会保留下来
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.js"></script>
</head>
<body>
<div class="box">
<span>aaa</span>
<span>aaa</span>
<span>aaa</span>
</div>
<button id="btn1">按钮</button>
<button id="btn2">按钮</button>
</body>
<script>
$("#btn1").on("click", function () {
// var $s = $(".box span").remove();//删除
var $s = $(".box span").detach();//删除
// $(".box span").empty();//清空所选元素里的内容
$(".box").before($s)
console.log($s)
})
$("#btn2").click(function () {
$(".box").append($("<span>新span</span>"));
//单击事件加不到新的span里
})
$("span").click(function () {
console.log("点击了")
})
// remove()和detach()都有返回值
// detach()删除之后会保留元素本身的属性
</script>
</html>