系统学习jQuery.核心知识.局部.jQuery操作.DOM操作.删除节点

来源：互联网发布：如何做网络主播编辑：程序博客网时间：2024/06/15 20:56

1.各个方法详解

（1）remove()方法

作用是从DOM中删除所有匹配的元素，传入的参数用于根据jQuery表达筛选元素；

当某个节点用remove方法删除后，该节点所包含的所有后代节点将同时被删除，此方法返回值是指向已被删除节点的引用，因此以后可以再使用此元素，但是附加的事件和数据都被删除了；

remove方法也可以通过传递参数来选择性删除元素。

（2）detach()方法

与remove()方法相似，也是删除所匹配的元素，不同点在于所有的事件和附加的数据都会被保留下来。

（3）empty()方法

严格来说，empty并不是删除节点，而是清空节点，它能清空元素中的所有后代节点。

2.实例

<html><head><title>jQuery中的DOM操作.删除节点</title><script type="text/javascript" src="jquery.min.js"></script><script>$(document).ready(function(){$("ul li .up").click(function(){var $father=$(this).parent();var $preFather=$father.prev();//$father.detach().insertBefore($preFather);$father.detach().insertBefore($preFather);//可能深入理解remove()方法和detach()方法的区别});$("ul li .down").click(function(){$(this).parent().empty();});});</script></head><body><p title="Choose your favorite fruit.">What's your favorite fruit?</p><ul><li>Apple  <a href="#" class="up">上移</a>  <a href="#" class="down">下移</a></li><li>Banana  <a href="#" class="up">上移</a>  <a href="#" class="down">下移</a></li><li>Pineapple  <a href="#" class="up">上移</a>  <a href="#" class="down">下移</a></li><li>Strawberry  <a href="#" class="up">上移</a>  <a href="#" class="down">下移</a></li><li>Pear  <a href="#" class="up">上移</a>  <a href="#" class="down">下移</a></li><li>Peach  <a href="#" class="up">上移</a>  <a href="#" class="down">下移</a></li><li>Watermelon  <a href="#" class="up">上移</a>  <a href="#" class="down">下移</a></li></ul></body></html>

0 0