清空元素 删除元素remove和detach的区别
1、清空元素 删除元素
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="jquery-1.11.3.min.js.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>如果你是工作经验小于2年的朋友0</h2> <h2>如果你是工作经验小于2年的朋友1</h2> <h2>如果你是工作经验小于2年的朋友2</h2> <h2>如果你是工作经验小于2年的朋友3</h2> <h2>如果你是工作经验小于2年的朋友4</h2> <h2>如果你是工作经验小于2年的朋友5</h2> <h2>如果你是工作经验小于2年的朋友6</h2> </div> </body> </html> 上面代码效果图片：
2、remove和detach的区别
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="jquery-1.11.3.min.js.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>如果你是工作经验小于2年的朋友0</h2> <h2>如果你是工作经验小于2年的朋友1</h2> <h2>如果你是工作经验小于2年的朋友2</h2> <h2>如果你是工作经验小于2年的朋友3</h2> <h2>如果你是工作经验小于2年的朋友4</h2> <h2>如果你是工作经验小于2年的朋友5</h2> <h2>如果你是工作经验小于2年的朋友6</h2> </div> </body> </html> 上面代码效果图片：
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知