jquery清空元素和删除元素remove和detach的区别
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/post/7782.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知
版权声明
本文仅代表作者观点，不代表本站立场。
本文系作者授权发表，未经许可，不得转载。
评论