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

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