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
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知