5-4 DOM包裹unwrap()方法
本节编程练习不计算学习进度，请电脑登录imooc.com操作

DOM包裹unwrap()方法

我们可以通过wrap方法给选中元素增加一个包裹的父元素。相反，如果删除选中元素的父元素要如何处理 ?

jQuery提供了一个unwrap()方法 ，作用与wrap方法是相反的。将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。

看一段简单案例：

<div>
    <p>p元素</p>
</div>

我要删除这段代码中的div，一般常规的方法会直接通过remove或者empty方法

$('div').remove();

但是如果我还要保留内部元素p，这样就意味着需要多做很多处理，步骤相对要麻烦很多，为了更便捷，jQuery提供了unwrap方法很方便的处理了这个问题

$('p').unwrap();

找到p元素，然后调用unwrap方法，这样只会删除父辈div元素了

结果：

<p>p元素</p>

这个方法比较简单，也不接受任何参数，注意参考下案例的使用即可

任务

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.     .left,
  10.     .right {
  11.         width: 250px;
  12.         height: 120px;
  13.     }
  14.  
  15.     .left div,
  16.     .right div {
  17.         width: 100px;
  18.         height: 120px;
  19.         padding: 5px;
  20.         margin: 5px;
  21.         float: left;
  22.         border: 1px solid #ccc;
  23.         background: #bbffaa;
  24.     }
  25.  
  26.     .right div {
  27.         background: yellow;
  28.     }
  29.     p {
  30.         border: 1px solid red;
  31.     }
  32.  
  33.     a {
  34.         border: 1px solid blue;
  35.     }
  36.     </style>
  37. </head>
  38.  
  39.  
  40. <body>
  41.     <h2>DOM包裹unwrap()方法</h2>
  42.     <div class="left">
  43.         <div class="aaron1">点击,通过unwrap方法给p元素删除父容器div</div>
  44.         <div class="aaron2">点击,通过unwrap的回调方法给a元素删除父容器div</div>
  45.     </div>
  46.     <div class="right">
  47.         <div>
  48.             <p>p元素</p>
  49.         </div>
  50.         <div>
  51.             <p>p元素</p>
  52.         </div>
  53.     </div>
  54.     <div class="left">
  55.         <div>
  56.             <a>a元素</a>
  57.         </div>
  58.         <div>
  59.             <a>a元素</a>
  60.         </div>
  61.     </div>
  62.     <script type="text/javascript">
  63.     $(".aaron1").on('click', function() {
  64.         //找到所有p元素，删除父容器div
  65.         $('p').unwrap('<div></div>')
  66.     })
  67.     </script>
  68.     <script type="text/javascript">
  69.     $(".aaron2").on('click', function() {
  70.         //找到所有p元素，删除父容器div
  71.         $('a').unwrap(function() {
  72.             return '<div></div>';
  73.         })
  74.     })
  75.     </script>
  76. </body>
  77.  
  78. </html>
  79.  
下一节