0

0

jquery 节点删除的方法有哪些?

伊谢尔伦

伊谢尔伦

发布时间:2017-06-17 13:33:47

|

2235人浏览过

|

来源于php中文网

原创

1节点删除之empty()的基本用法

要移除页面上节点是开发者常见的操作,jquery提供了几种不同的方法用来处理这个问题,这里我们开仔细了解下empty方法

empty 顾名思义,清空方法,但是与删除又有点不一样,因为它只移除了 指定元素中的所有子节点。

这个方法不仅移除子元素(和其他后代元素),同样移除元素里的文本。因为,根据说明,元素里任何文本字符串都被看做是该元素的子节点。请看下面的HTML:

php.cn

如果我们通过empty方法移除里面p的所有元素,它只是清空内部的html代码,但是标记仍然留在DOM中

//通过empty处理
$('.hello').empty()
//结果:

php.cn

被移除

可以参考右边的代码区域:

通过empty移除了当前p元素下的所有p元素 但是本身id=test的p元素没有被删除




    
    
    
    


    

通过empty移除元素

p元素1

p元素2

2. 节点删除之remove()的有参用法和无参用法

remove与empty一样,都是移除元素的方法,但是remove会将元素自身移除,同时也会移除元素内部的一切,包括绑定的事件及与该元素相关的jQuery数据。

例如一段节点,绑定点击事件

php.cn

$('.hello').on("click",fn)

如果不通过remove方法删除这个节点其实也很简单,但是同时需要把事件给销毁掉,这里是为了防止"内存泄漏",所以前端开发者一定要注意,绑了多少事件,不用的时候一定要记得销毁

通过remove方法移除p及其内部所有元素,remove内部会自动操作事件销毁方法,所以使用使用起来非常简单

//通过remove处理
$('.hello').remove()
//结果:

php.cn

全部被移除 //节点不存在了,同事事件也会被销毁

remove表达式参数:

remove比empty好用的地方就是可以传递一个选择器表达式用来过滤将被移除的匹配元素集合,可以选择性的删除指定的节点

我们可以通过$()选择一组相同的元素,然后通过remove()传递筛选的规则,从而这样处理

对比右边的代码区域,我们可以通过类似于这样处理

$("p").filter(":contains('3')").remove()

3.节点删除之empty和remove区别

要用到移除指定元素的时候,jQuery提供了empty()与remove([expr])二个方法,两个都是删除元素,但是两者还是有区别

empty方法

严格地讲,empty()方法并不是删除节点,而是清空节点,它能清空元素中的所有后代节点

第三波网上书店源码
第三波网上书店源码

网络购物已经随着Ineternet的飞速发展而得到越来越多应用。为了提高交易效率,节省人们的宝贵时间,我们开发了这套稳定可靠、操作方便、安全有效的时尚购书系统,它主要分为前台和后台两大模块:(前台)使用了站点地图,显示您所在网站的位置。首页图书列表显示,用户登陆,用户注 册,列出图书详细,购物车功能,以及结算等。(后台)图书、用户的添加,删除,修改等操作,查看客户的订单及修改 该项目采用三层结构开

下载

empty不能删除自己本身这个节点

remove方法

该节点与该节点所包含的所有后代节点将同时被删除

提供传递一个筛选的表达式,删除指定合集中的元素

4.节点删除之保留数据的删除操作detach()

如果我们希望临时删除页面上的节点,但是又不希望节点上的数据与事件丢失,并且能在下一个时间段让这个删除的节点显示到页面,这时候就可以使用detach方法来处理

detach从字面上就很容易理解。让一个web元素托管。即从当前页面中移除该元素,但保留这个元素的内存模型对象。

来看看jquery官方文档的解释:

这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。与remove()不同的是,所有绑定的事件、附加的数据等都会保留下来。 $("p").detach()这一句会移除对象,仅仅是显示效果没有了。但是内存中还是存在的。当你append之后,又重新回到了文档流中。就又显示出来了。

当然这里要特别注意,detach方法是JQuery特有的,所以它只能处理通过JQuery的方法绑定的事件或者数据

通过 $("p").detach()把所有的P元素删除后,再通过append把删除的p元素放到页面上,通过点击文字,可以证明事件没有丢失

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

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

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

remove:移除节点

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

有参数,移除筛选出的节点以及该节点的内部的所有节点,包括节点上事件与数据

detach:移除节点

移除的处理与remove一致

与remove()不同的是,所有绑定的事件、附加的数据等都会保留下来

例如:$("p").detach()这一句会移除对象,仅仅是显示效果没有了。但是内存中还是存在的。当你append之后,又重新回到了文档流中。就又显示出来了。

相关专题

更多
云朵浏览器入口合集
云朵浏览器入口合集

本专题整合了云朵浏览器入口合集,阅读专题下面的文章了解更多详细地址。

20

2026.01.20

Java JVM 原理与性能调优实战
Java JVM 原理与性能调优实战

本专题系统讲解 Java 虚拟机(JVM)的核心工作原理与性能调优方法,包括 JVM 内存结构、对象创建与回收流程、垃圾回收器(Serial、CMS、G1、ZGC)对比分析、常见内存泄漏与性能瓶颈排查,以及 JVM 参数调优与监控工具(jstat、jmap、jvisualvm)的实战使用。通过真实案例,帮助学习者掌握 Java 应用在生产环境中的性能分析与优化能力。

29

2026.01.20

PS使用蒙版相关教程
PS使用蒙版相关教程

本专题整合了ps使用蒙版相关教程,阅读专题下面的文章了解更多详细内容。

162

2026.01.19

java用途介绍
java用途介绍

本专题整合了java用途功能相关介绍,阅读专题下面的文章了解更多详细内容。

120

2026.01.19

java输出数组相关教程
java输出数组相关教程

本专题整合了java输出数组相关教程,阅读专题下面的文章了解更多详细内容。

41

2026.01.19

java接口相关教程
java接口相关教程

本专题整合了java接口相关内容,阅读专题下面的文章了解更多详细内容。

10

2026.01.19

xml格式相关教程
xml格式相关教程

本专题整合了xml格式相关教程汇总,阅读专题下面的文章了解更多详细内容。

14

2026.01.19

PHP WebSocket 实时通信开发
PHP WebSocket 实时通信开发

本专题系统讲解 PHP 在实时通信与长连接场景中的应用实践,涵盖 WebSocket 协议原理、服务端连接管理、消息推送机制、心跳检测、断线重连以及与前端的实时交互实现。通过聊天系统、实时通知等案例,帮助开发者掌握 使用 PHP 构建实时通信与推送服务的完整开发流程,适用于即时消息与高互动性应用场景。

23

2026.01.19

微信聊天记录删除恢复导出教程汇总
微信聊天记录删除恢复导出教程汇总

本专题整合了微信聊天记录相关教程大全,阅读专题下面的文章了解更多详细内容。

172

2026.01.18

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
jQuery 教程
jQuery 教程

共42课时 | 4.5万人学习

HTML+CSS基础与实战
HTML+CSS基础与实战

共132课时 | 9.6万人学习

tp6+adminlte搭建通用后台
tp6+adminlte搭建通用后台

共39课时 | 5.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号