remove()和detach()方法的异同？

最新推荐文章于 2025-06-30 09:27:50 发布

原创最新推荐文章于 2025-06-30 09:27:50 发布 · 414 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #jquery #html

本文详细探讨了jQuery中的remove()和detach()两个方法的区别。相同之处在于两者都能删除DOM节点，但remove()在删除时会移除绑定的事件，而detach()则保留了事件绑定。通过一个具体的HTML案例，展示了当使用这两个方法移动并操作段落元素时，点击事件的不同行为。案例中，使用detach()的段落即使被移除后，仍然保留其click事件，当重新附加到文档时，依然能响应动画效果。

思路1:相同之处是他们都可以删除节点。
思路2：不同之处是remove()删除之后不保留该元素绑定的事件
思路3：而detach()删除之后保留该元素绑定的事件
案例：
<html>
<meta charset="UTF-8"/>
<head>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("body").append($("p").remove());
});
$("p").click(function(){
$(this).animate({fontSize:"+=10px"})
});
});
</script>
</head>
<body>
<p>在本段落移动之后，试着点击该段落，请注意它保留了 click 事件。</p>
<button>移动 p 元素</button>
</body>
</html>