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()都支持选择器表达

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