DOM节点的删除

我们做MVC项目的时候,经常会需要动态添加节点,既然我们会用到添加节点,那么也应该会需要删除节点。
在删除节点的时候,我们通常都是用JQuery里面的方法,它提供了2种方法可以删除节点,它们都是可以用于删除元素,都是都各有区别,第一种就是empty()的方法,它的用途就是删除匹配到的元素的集合里面所有的子元素,也就是子节点,其实empty()的方法它不是删除节点的,而是清空匹配元素里面的所有节点,也就是清空所有后代元素,但不包括匹配到的元素,不严格来说清空后代元素和删除节点除都属于删除,所以我们也把empty()这个方法归为了DOM节点的删除方法函数,第二种就是remove()的方法,这个方法和上面的第一个方法虽然都是可以删除节点,但是却一些不同,上面的empty()方法在删除节点的过程中不会把自身匹配到的元素删除,而是把匹配到的元素的后代元素全部删除掉,而至于remove()的方法,它则是把匹配到的元素和这个元素里面包含的所有的后代元素全部一同删除掉。这个方法还有一个特别之处,就是提供了一个筛选的表达式,可以用来筛选元素集合的元素,从而删除掉指定的集合中的元素。下面举列一下它们的写法,以便提供参考:
第一种方法的写法(注意符号都必需是英文状态下的符文)
$(“需要的匹配移除元素的ID”).empty();移除匹配元素内的元素
第二种的写法就是:
$(“需要的匹配移除元素的ID”).remove();移除整个匹配元素
第二种写法还有一种方式,就是可以对匹配的元素进行筛选一下再进行移除
$(“p”).remove(“:contains(6)”);就是筛选出所有p元素中包含了6的元素,然后把包含6的全部删除。
下面是通过上面代码删除节点前和删除节点后的对比图,每一个事件匹配的就是它下面对应的元素
DOM节点的删除DOM节点的删除
其实,除了以上2个方法函数可以移除节点外,jQuery中还有一个特殊的方法函数,它就是detach([expr])函数,它不像上述提到的2个方法那样,直接把匹配的节点删除掉,它这个方法是不会把匹配到的元素删除掉,而是把匹配的元素隐藏起来,因此可以在以后再次需要用到这些匹配元素的时候,可以再次使用这些函数,与remove()方法不同的是它可以把所有绑定在那个移除的节点的事件还有附加在那个节点上的所有数据等都会保存下来,通过这个方法删除移除的节点,它仅仅只是从页面上消失,并没有被删除,这个删除的节点还是会保存在内存流里面,而且与它有关的数据和事件也都不会丢失。