012_删除元素

最新推荐文章于 2023-10-18 18:51:24 发布

自由与束缚JavaJavaScript

最新推荐文章于 2023-10-18 18:51:24 发布

阅读量203

点赞数

分类专栏： jQuery学习文章标签： jquery javascript html

本文链接：https://blog.csdn.net/aihiao/article/details/109966979

版权

jQuery学习专栏收录该内容

37 篇文章 0 订阅

订阅专栏

1. remove()方法

1.1. remove()方法移除每一个匹配元素, 包括所有文本和子节点。

1.2. remove()方法还同时删除被选元素及其子元素的绑定事件。这一点与detach()不同。

1.3. remove()方法可以返回所有匹配的元素。

1.4. 语法

$(selector).remove()

1.5. 过滤被删除的元素

1.5.1. remove()方法也可接受一个参数, 允许您对被删元素进行过滤。

1.5.2. 该参数可以是任何jQuery选择器的语法。

1.5.3. 下面的例子删除class="italic"的所有<p>元素:

$("p").remove(".italic");

1.6. 例子

1.6.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>remove删除元素</title>
		
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				var removeObj;

				$('#btn1').click(function(){
					removeObj = $("div").remove();
				});

				$('#btn2').click(function(){
					$("div").remove("#div2");
				});

				$('#btn3').click(function(){
					if(removeObj) {
						$("body").append(removeObj);
						removeObj = null;
					}
				});

				$('#div1').mouseover(function(){
					$(this).css({"font-size": "2em"});
				});
				$('#div1').mouseleave(function(){
					$(this).css({"font-size": "1em"});
				});
			});
		</script>
	</head>
	<body>
		<div id="div1" style="background-color: red; width: 600px; height: 100px">
			<p>remove()方法移除每一个匹配元素, 包括所有文本和子节点。</p>
		</div>
		<div id="div2" style="background-color: green; width: 600px; height: 100px">
			<p>remove()方法也可接受一个参数, 允许您对被删元素进行过滤。</p>
		</div> <br />
		<button id="btn1">remove删除元素</button> <button id="btn2">remove过滤被删除的元素</button>
		<button id="btn3">添加remove删除的元素</button>
	</body>
</html>

1.6.2. 效果图

2. detach()方法

2.1. detach()方法移除每一个匹配元素, 包括所有文本和子节点。

2.2. detach()方法保留被选元素及其子元素的绑定事件。这一点与remove()不同。

2.3. detach()方法可以返回所有匹配的元素。

2.4. 语法

$(selector).detach()

2.5. 过滤被删除的元素

2.5.1. detach()方法也可接受一个参数, 允许您对被删元素进行过滤。

2.5.2. 该参数可以是任何jQuery选择器的语法。

2.5.3. 下面的例子删除class="italic"的所有<p>元素:

$("p").detach(".italic");

2.6. 例子

2.6.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>detach删除元素</title>
		
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				var detachObj;

				$('#btn1').click(function(){
					detachObj = $("div").detach();
				});

				$('#btn2').click(function(){
					$("div").detach("#div2");
				});

				$('#btn3').click(function(){
					if(detachObj) {
						$("body").append(detachObj);
						detachObj = null;
					}
				});

				$('#div1').mouseover(function(){
					$(this).css({"font-size": "2em"});
				});
				$('#div1').mouseleave(function(){
					$(this).css({"font-size": "1em"});
				});
			});
		</script>
	</head>
	<body>
		<div id="div1" style="background-color: red; width: 600px; height: 100px">
			<p>detach()方法移除每一个匹配元素, 包括所有文本和子节点。</p>
		</div>
		<div id="div2" style="background-color: green; width: 600px; height: 100px">
			<p>detach()方法也可接受一个参数, 允许您对被删元素进行过滤。</p>
		</div> <br />
		<button id="btn1">detach删除元素</button> <button id="btn2">detach过滤被删除的元素</button>
		<button id="btn3">添加detach删除的元素</button>
	</body>
</html>

2.6.2. 效果图

3. empty()方法

3.1. empty()方法删除每一个匹配元素的所有子元素。

3.2. 语法

$(selector).empty()

3.3. 例子

3.3.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>empty删除元素</title>
		
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('#btn1').click(function(){
					$("div").empty();
				});
			});
		</script>
	</head>
	<body>
		<div style="background-color: red; width: 600px; height: 80px">
			<p>empty()方法删除每一个匹配元素的所有子元素。</p>
			<p>empty()方法删除每一个匹配元素的所有子元素。</p>
		</div> 
		<div style="background-color: green; width: 600px; height: 80px">
			<p>empty()方法删除每一个匹配元素的所有子元素。</p>
			<p>empty()方法删除每一个匹配元素的所有子元素。</p>
		</div><br />
		<button id="btn1">empty删除元素</button>
</html>

3.3.2. 效果图

自由与束缚JavaJavaScript

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
012_删除元素

1. remove()方法1.1. remove()方法移除被选元素, 包括所有文本和子节点。1.2. 该方法还同时删除被选元素及其子元素的绑定事件。这一点与detach()不同。1.3. 该方法可以返回匹配的元素。1.4. 语法$(selector).remove()1.5. 过滤被删除的元素1.5.1. remove()方法也可接受一个参数, 允许您对被删元素进行过滤。1.5.2. 该参数可以是任何jQuery选择器的语法。1.5.3. 下面的例子删除class="
复制链接

扫一扫

专栏目录