4-2 DOM节点删除之remove()的有参用法和无参用法
本节编程练习不计算学习进度，请电脑登录imooc.com操作

DOM节点删除之remove()的有参用法和无参用法

remove与empty一样，都是移除元素的方法，但是remove会将元素自身移除，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。

例如一段节点，绑定点击事件

<div class="hello"><p>慕课网</p></div>
$('.hello').on("click",fn)

如果不通过remove方法删除这个节点其实也很简单，但是同时需要把事件给销毁掉，这里是为了防止"内存泄漏"，所以前端开发者一定要注意，绑了多少事件，不用的时候一定要记得销毁

通过remove方法移除div及其内部所有元素，remove内部会自动操作事件销毁方法，所以使用使用起来非常简单

//通过remove处理
$('.hello').remove()
//结果：<div class="hello"><p>慕课网</p></div> 全部被移除
//节点不存在了,同事事件也会被销毁

remove表达式参数：

remove比empty好用的地方就是可以传递一个选择器表达式用来过滤将被移除的匹配元素集合，可以选择性的删除指定的节点

我们可以通过$()选择一组相同的元素，然后通过remove（）传递筛选的规则，从而这样处理

对比右边的代码区域，我们可以通过类似于这样处理

$("p").filter(":contains('3')").remove()

任务

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.     .test1 {
  10.         background: #bbffaa;
  11.     }
  12.  
  13.     .test2 {
  14.         background: yellow;
  15.     }
  16.     </style>
  17. </head>
  18.  
  19. <body>
  20.     <h2>通过jQuery remove方法移除元素</h2>
  21.     <div class="test1">
  22.         <p>p元素1</p>
  23.         <p>p元素2</p>
  24.     </div>
  25.     <div class="test2">
  26.         <p>p元素3</p>
  27.         <p>p元素4</p>
  28.     </div>
  29.     <button>通过点击jQuery的remove移除元素</button>
  30.     <button>通过点击jQuery的remove移除指定元素</button>
  31.     <script type="text/javascript">
  32.     $("button:first").on('click', function() {
  33.         //删除整个 class=test1的div节点
  34.         $(".test1").remove()
  35.     })
  36.  
  37.     $("button:last").on('click', function() {
  38.         //找到所有p元素中，包含了3的元素
  39.         //这个也是一个过滤器的处理
  40.         $("p").remove(":contains('3')")
  41.     })
  42.     </script>
  43. </body>
  44.  
  45. </html>
  46.  
下一节