温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

DOM——节点删除.empty()、remove()和.detach()

发布时间:2020-05-16 09:34:35 来源:网络 阅读:2058 作者:拉考的考拉 栏目:web开发

      节点删除.empty()、remove()和.detach()

1   empty清空方法,与删除不一样,只移除了指定元素中的所有子节点,不仅移除子元素(和其他后代元素),同样移除元素里的文本,如<div class="hello"><p>慕课网</p></div>

2   通过empty方法移除里面div的所有元素,只是清空内部的html代码,但是标记仍然留在DOM中,如//通过empty处理

                               $('.hello').empty()

                               //结果:<p>慕课网</p>被移除

                               <div class="hello"></div>

3   remove会将元素自身移除,也会移除元素内部的一切,包括绑定的事件及与该元素相关的JQuery数据,如<div class="hello"><p>慕课网</p></div>

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

4   如果不通过remove方法删除这个节点,但是同时需要把事件给销毁掉,是为了防止内存泄漏,所以在前端开发中绑了多少事件,不用的时候一定要记得销毁

5   通过remove方法移除div及其内部所有元素,remove内部会自动操作事件销毁方法,如//通过remove处理

             $('.hello').remove()

             //结果:<div class="hello"><p>慕课网</p></div>全部被移除

            //节点不存在了,同时事件也会被销毁

6   remove表达式参数

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

7   通过$()选择一组相同的元素,然后通过remove()传递筛选的规则,如$("p").filter(":contains('3')").remove()

8   empty()和remove()的区别

   empty()不删除节点,只是清空节点,能清空元素中的所有后代节点,但是不能删除自己本身这个节点

   remove()该节点与包含的所有后代节点将同时被删除,提供传递一个筛选的表达式,删除置顶和集中的元素

9   detach()临时删除页面上的节点,不让节点上的数据和事件丢失,能在下一个时间段让这个删除的节点显示到页面,即从当前页面中移除该元素,但保留这个元素的内存模型对象,如$("p").detach()

10   .remove()和.detach()的不同

   .remove()事件及数据会被删除

   .detach()所有绑定的事件、附加的数据等都会保留下来

11   .remove()和.detach()的共同点

    .remove()和.detach()都支持选择器表达

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


向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI