4-1 DOM节点删除之empty()的基本用法
本节编程练习不计算学习进度，请电脑登录imooc.com操作

DOM节点删除之empty()的基本用法

要移除页面上节点是开发者常见的操作，jQuery提供了几种不同的方法用来处理这个问题，这里我们开仔细了解下empty方法

empty 顾名思义，清空方法，但是与删除又有点不一样，因为它只移除了 指定元素中的所有子节点。

这个方法不仅移除子元素（和其他后代元素），同样移除元素里的文本。因为，根据说明，元素里任何文本字符串都被看做是该元素的子节点。请看下面的HTML：

<div class="hello"><p>慕课网</p></div>

如果我们通过empty方法移除里面div的所有元素，它只是清空内部的html代码，但是标记仍然留在DOM中

//通过empty处理
$('.hello').empty()

//结果：<p>慕课网</p>被移除
<div class="hello"></div>


可以参考右边的代码区域：

通过empty移除了当前div元素下的所有p元素
但是本身id=test的div元素没有被删除

任务

index.html 
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  6.     <title></title>
  7.     <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
  8.     <style>
  9.     div {
  10.         background: #bbffaa;
  11.         width: 300px;
  12.     }
  13.     </style>
  14. </head>
  15.  
  16. <body>
  17.     <h2>通过empty移除元素</h2>
  18.     <div id="test">
  19.         <p>p元素1</p>
  20.         <p>p元素2</p>
  21.     </div>
  22.     <button>点击通过jQuery的empty移除元素</button>
  23.     <script type="text/javascript">
  24.     $("button").on('click', function() {
  25.         //通过empty移除了当前div元素下的所有p元素
  26.         //但是本身id=test的div元素没有被删除
  27.         $("#test").empty()
  28.     })
  29.     </script>
  30. </body>
  31.  
  32. </html>
  33.  
下一节