DOM节点删除之detach()和remove()区别，jQuery基础(二)

第1章课程介绍
视频：1-1 jQuery基础(二)—DOM...(01:31)

DOM节点删除之detach()和remove()区别

JQuery是一个很大强的工具库，在工作开发中，有些方法因为不常用到，或是没有注意到而被我们忽略。

remove()和detach()可能就是其中的一个，可能remove()我们用得比较多，而detach()就可能会很少了

通过一张对比表来解释2个方法之间的不同

方法名	参数	事件及数据是否也被移除	元素自身是否被移除
remove	支持选择器表达	是	是（无参数时），有参数时要根据参数所涉及的范围
detach	参数同remove	否	情况同remove

remove：移除节点

无参数，移除自身整个节点以及该节点的内部的所有节点，包括节点上事件与数据
有参数，移除筛选出的节点以及该节点的内部的所有节点，包括节点上事件与数据

detach：移除节点

移除的处理与remove一致
与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来
例如：$("p").detach()这一句会移除对象，仅仅是显示效果没有了。但是内存中还是存在的。当你append之后，又重新回到了文档流中。就又显示出来了。

具体可以参考右边的代码区域的对比

任务

?不会了怎么办

index.html

1
2
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

提交

自动运行

重置代码

全屏

请验证，完成请求

由于请求次数过多，请先验证，完成再次请求

问答
评论
笔记
代码

全部精华我要发布

这里面的e什么意思能具体讲一下么

最新回答 / 慕粉2133093261

this代表触发当前事件的元素。如果事件触发的函数传入参数的话，第一个参数会默认为当前触发的事件对象，target是事件对象里的一个属性，代表的是：触发当前事件的元素。你可以在一个事件触发后执行的函数传入一个参数，然后把这个形参打印到控制台，你就会看到他是一个事件对象(Event Object)。他会有一个属性target。你可以把this和形参(parameter).target同时console.log打印到控制台看看。有一点就是jquery触发的事件返回的是一个jquery的事件对象(jquery...

2 回答 1330 浏览

2019-10-19

谁能解释下，多次点击button之后第二次刷新出来来的p2元素不再能弹出内容了

最赞回答 / 小季乐乐4412490

重点：detach不会清除事件，remove会清除事件当点击remove的时候会清掉第一个p标签，然后在下方添加一个p标签，因为remove会清除掉p标签点击事件，点击p标签的时候是没有点击事件的当点击detach的时候也是会清掉第一个p标签，然后在下方添加一个p标签，因为detach不会清掉p标签点击事件，点击p标签的时候是有事件的如果你点了两次remove按钮，那么会在下方添加两个不保留事件的p标签，如果再次点击detach的时候会默认找第一个p标签，因为append是顺序插入，也就是remove删除...

6 回答 1368 浏览

2022-05-23

关于$('p').click(function(e) { alert(e.target.innerHTML) })

已采纳回答 / 慕瓜4066904

这行代码是给2个p绑定事件。方便看出detach和remove的区别，detach后绑定的事件依然存在。点击两个按钮，再点击下面的p元素，就可以看出区别。

3 回答 1945 浏览

2019-09-14

为什么尝试把，.click(function(){})替换为.on(click,function(){})后，无效

最新回答 / keydew

应该替换为.on('click',function{})，click要加引号

1 回答 629 浏览

2019-05-08

有点疑惑，求解答

已采纳回答 / 欧皇贵族

remove删除的内容被赋值给p了，之后用append插入到后面

2 回答 1195 浏览

2020-02-18

很疑惑，求分享看法

已采纳回答 / Teaocat

首先,看代码, //给页面上2个p元素都绑定事件 $('p').click(function(e) { alert(e.target.innerHTML) }) $("button:first").click(function() { var p = $("p:first").remove(); p.css('color','red').text('p1通过remove处理后,点击该元素,事件丢失') $("body").ap...

6 回答 1605 浏览

2019-04-24

颜色设置的为什么是整个body 不是p元素呢

最新回答 / 愚慕脑袋

本来就没设置整个body，是p元素

1 回答 1143 浏览

2018-08-23

remove和 detach append（p）之后p都会显示

最赞回答 / 等你到天明

remove等于让节点从宇宙中消失。什么都没了detach相当于让节点变透明。在html中看不见，但是你的思想还在注视着整个世界detach + append（p）相当于让本来在html中透明的变成可以看见的存在的。

3 回答 1214 浏览

2018-09-03

关于第二个为啥还是p:first不是p:last?求详细解

最赞回答 / 五月黑風

p:first 你点任意一个按钮以后，剩下的那个P元素就在第一位了。。点另外一个按钮还是操作这个p:first

2 回答 1534 浏览

2018-06-10

多次点击detach（）

已采纳回答 / 辣条宝宝

因为是p元素的绑定事件，而代码里面只有两个p元素，所以最多只能响应2次，remove()也是这样，你多加一个p元素，就能多一次点击事件

3 回答 1413 浏览

2022-03-24

为什么 var p =$('p:first').detach(); 不能直接换成$('p:first').detach();

已采纳回答 / qq_寻找_13

var p =$('p:first').detach();这句话是把detach删除的第一个p元素保存起来，要用的时候直接用append(p)是把保存好的删除的p元素在加到body里面你直接var p;p.css('color','red').text('p1通过remove处理后,点击该元素,事件丢失');是自己新建了一个新的p元素，只有你手动加进去的东西，不是通过remove或者detach删掉的。所以你再append加进去的只是你自己建的p元素！

2 回答 1683 浏览

2017-10-03