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

最新推荐文章于 2021-11-26 16:40:32 发布

软件章

最新推荐文章于 2021-11-26 16:40:32 发布

阅读量1k

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/jacklearntech/article/details/17630763

版权

jQuery 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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

收藏

觉得还不错? 一键收藏
0
评论
系统学习jQuery.核心知识.局部.jQuery操作.DOM操作.删除节点

1.各个方法详解（1）remove()方法作用是从DOM中删除所有匹配的元素，传入的参数用于根据jQuery表达筛选元素；当某个节点用remove方法删除后，该节点所包含的所有后代节点将同时被删除，此方法返回值是指向已被删除节点的引用，因此以后可以再使用此元素，但是附加的事件和数据都被删除了；remove方法也可以通过传递参数来选择性删除元素。（2）detach()方法
复制链接

扫一扫

专栏目录