jQuery remove()和detach()区别_JS、jQ、TS_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

jQuery remove()和detach()区别

来源：未知作者：类型：图文教程点击次数：发布时间：2015-10-21 09:54:39

remove()和detach()共同点：
二者都是讲容器删除，返回的都是指向被删除的节点的引用，所以，删除后，可以在以后继续使用。
二者的区别是，当被删除容器事先被绑定事件，使用remove()删除的，除了节点，事件也随之消失；而使用detach()在将来使用时，还可以继续使用删除之前被绑定的事件。

通过下面的例子可以更清楚看到这一点：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery remove()和detach()区别演示 - 我爱模板网 www.5imoban.net</title> <script src="http://www.5imoban.net/tpl/js/jquery-1.8.3.min.js"></script> <style> div{width:215px; height:30px; border-radius:3px; margin:5px 0; font-size:12px; font-family:"微软雅黑"; text-align:center; line-height:30px; cursor:pointer;} #div1{background:blue; color:#fff;} #div2{background:orange;} </style> </head> <body> <div id="div1">div1：remove()方法删除的容器</div> <div id="div2">div2：detach()方法删除的容器</div> <input type="button" value="remove div1，detach div2" /> <script> $("div").click(function(){ alert("能弹出来，说明事件被保留！"); }) $("input").click(function(){ var div1 = $("#div1").remove(); //click事件不存在 var div2 = $("#div2").detach(); //click事件被保留 $("input").after(div1).after(div2); }) </script> </body> </html>
提示：您可以先修改部分代码再运行

我们可以发现，事先被绑定click事件的两个div，当被分别remove()和detach()，然后又被追加到input后面，再点击的时候，remove()删除的div已经没有了click事件，而detach()的click事件仍然有效果。