UDN-企业互联网技术人气社区

板块导航

浏览  : 767
回复  : 11

[原生js] DOM节点删除之empty和remove

[复制链接]
genie1003的头像 楼主
发表于 2017-2-9 10:45:54 | 显示全部楼层 |阅读模式
  .empty()是指对该节点后代的删除,结果是清空该节点(该节点里面已无元素)。

  .remove()是指删除该节点,结果是删除该节点(该节点及其后代元素都将不存在)。

  下面放代码来说明。
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js "></script>
  7.     <style>
  8.         body{
  9.             background: #ffe5aa;
  10.         }
  11.         #test1{
  12.             width:100px;
  13.             height:100px;
  14.             background: #3db7ff;
  15.         }
  16.         #test2{
  17.             width:100px;
  18.             height:100px;
  19.             background: #ff179f;
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  24.     <div class="whole">
  25.         <button class="bt1">通过empty删除节点</button>
  26.         <button class="bt2">通过remove删除节点</button>
  27.     </div>
  28.     <div id="test1">
  29.         <p>元素1</p>
  30.         <p>元素2</p>
  31.     </div>
  32.     <div id="test2">
  33.         <p>元素3</p>
  34.         <p>元素4</p>
  35.     </div>
  36.     <script type="text/JavaScript">
  37.         $(".bt1").on('click',function(){
  38.             $("#test1").empty();
  39.         })
  40.          $(".bt2").on('click',function(){
  41.             $("#test2").remove();
  42.         })
  43.     </script>
  44. </body>
  45. </html>
复制代码

  点击运行后,出现以下画面。
3.png

  点击button1,将执行.empty()指令,预期将删除test1子节点元素。结果如下。
2.png

  再点击button2,将执行.remove()指令。预期将删除test2及其后代子节点元素。结果如下。
1.png

相关帖子

发表于 2017-2-9 10:46:25 | 显示全部楼层
回帖支持下楼主,请眼熟我,我叫“闪现撞墙“
使用道具 举报

回复

发表于 2017-2-20 02:47:51 | 显示全部楼层
js太强大了,好多工作前端都可以做了…
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部