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

简介:

      节点删除.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()都支持选择器表达

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



本文转自 拉考的考拉 51CTO博客,原文链接:http://blog.51cto.com/lakaodekaola/1983517
相关文章
|
5月前
|
JavaScript
jQuery的empty、remove、detach区别
jQuery的empty、remove、detach区别
|
7月前
|
监控 JavaScript 前端开发
cypress 的错误消息 - the element has become detached or removed from the dom
cypress 的错误消息 - the element has become detached or removed from the dom
39 0
LeetCode 19. 删除链表的倒数第N个节点 Remove Nth Node From End of List
LeetCode 19. 删除链表的倒数第N个节点 Remove Nth Node From End of List
LeetCode 237. 删除链表中的节点 Delete Node in a Linked List
LeetCode 237. 删除链表中的节点 Delete Node in a Linked List
|
设计模式 JavaScript
Nodejs事件循环
nodejs零碎知识记录
62 0
list.remove(index)返回flase,移除失败
list.remove(index)返回flase,移除失败
89 0
list.remove(index)返回flase,移除失败
|
JavaScript
DOM 精通了?请问 Node 和 Element 有何区别?
相信我们很多同学都经常会使用到 Node(节点)和 Element(节点)的概念,那么这两者到底有何区别,不知道有多少人能够答得上来这个问题?
199 0
DOM 精通了?请问 Node 和 Element 有何区别?
|
Java Python
LeetCode 19:删除链表的倒数第N个节点 Remove Nth Node From End of List
给定一个链表,删除链表的倒数第 n 个节点,并且返回链表的头结点。 Given a linked list, remove the n-th node from the end of list and return its head. 示例: 给定一个链表: 1->2->3->4->5, 和 n = 2. 当删除了倒数第二个节点后,链表变为 1->2->3->5. 说明: 给定的 n 保证是有效的。
838 0
|
算法 C#
算法题丨Remove Element
描述 Given an array and a value, remove all instances of that value in-place and return the new length.
1021 0