jquery清空元素和删除元素remove和detach的区别

时间：6年前阅读：4823

jquery是一个很大强的东西，在工作中常能用到，可是有些方法还是因为不常用到，或是没有注意到而被我们而忽略。

remove()和detach()可能就是其中的一个，可能remove()我们用得比较多，而detach()就可能会很少了。可能我用的不够精吧，我是一次也没有用过。可是这次因为一个项目中一个问题，而用到它，感觉很有意思就记录下来，与大家分享。

remove():官方的解释是

从DOM中删除所有匹配的元素。这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。

我的理解就是将元素移除了。

直接上代码：

01 删除

<!DOCTYPE html>    
<html>    
	<head>    
		<meta charset="UTF-8">    
		<title></title>    
		<script src="../tu/jquery-1.11.3.min.js" type="text/javascript"></script>    
		<script type="text/javascript">    
			$(function(){    
				$('#btn').click(function(){    
//				清空元素内容   empty    
//				$('#box').empty();    
//				删除元素     remove    
//				$('#box').remove();    
//				也是删除元素    
				$('#box').detach();    
				})    
			})    
		</script>    
	</head>    
	<body>    
		<h1 id="aa">这个是h1标签</h1>    
		<input type="button" name="" id="btn" value="来点我呀" />    
		<br /><br />    
		<div id="box">    
		<h2>朗多24+12麦基23+16 湖人大胜鹈鹕取两连胜 0</h2>    
		<h2>特雷杨加时绝杀雄鹿 字母哥缺战布朗空砍27+9 1</h2>    
		<h2>伯克25分独行侠送雷霆连败 韦少三双乔治27分 2</h2>    
		<h2>利物浦2-1绝杀热刺暂时登顶 菲米破门 3</h2>    
		<h2>切尔西争议球2-1逆转卡迪夫城 奇克头球绝杀 4</h2>    
		<h2>郭艾伦场均砍34分 24年本土后卫从未有人这么疯 5</h2>    
		<h2>场均28+15！王哲林昂首告别 争议？他无愧MVP 6</h2>    
		</div>    
	</body>    
</html>

02 emove和detach的区别

<!DOCTYPE html>    
<html>    
	<head>    
		<meta charset="UTF-8">    
		<title></title>    
		<script src="../tu/jquery-1.11.3.min.js" type="text/javascript"></script>    
		<script type="text/javascript">    
			$(function(){    
				$('#aa').click(function(){    
					alert('哈哈哈');    
				})    
//				删除元素    
				$('#btn1').click(function(){    
//				remove  会将元素节点和它身上的事件效果都删除    
//				detach只删除元素节点,不删除它身 上的事件和效果    
//				区别  这个点恢复后,原来的#aa单击事件删除了    
//				tt = $('#aa').remove();    
//				区别    这个点恢复后,原来的#aa单击事件还在    
				tt = $('#aa').detach();    
			})    
//				恢复元素    
				$('#btn2').click(function(){    
					$("#btn2").after(tt);    
				})    
				})    
		</script>    
	</head>    
	<body>    
		<input type="button" name="" id="btn1" value="删除" />    
		<input type="button" name="" id="btn2" value="恢复" />    
		<h1 id="aa">这个是h1标签</h1>    
		<br /><br />    
		<div id="box">    
		<h2>库里11记三分唐斯罚球绝杀 勇士加时负森林狼 0</h2>    
		<h2>球迷借钱也要来现场看吉诺比利 他对刺蜜意味着什么？ 1</h2>    
		<h2>马刺球迷告白马努：独一无二的存在 常回家看看 2</h2>    
		<h2>西媒：巴萨5个月17轮西甲不败得失球41-9 该开始轮换了 3</h2>    
		<h2>利物浦冠军之心！争冠天时地利人和 7次读秒进球+3次收大礼 4</h2>    
		<h2>斯帕莱蒂：需要谈判才归队是耻辱 伊卡尔迪又不是梅西 5</h2>    
		<h2>西甲综述-瓦伦力克塞维利亚 塞尔塔3球大逆转 6</h2>    
		</div>    
	</body>    
</html>

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

jquery清空元素和删除元素remove和detach的区别

网友评论