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>