如何用jQuery移除特定选择器的包裹元素？及移除.ui-effects-wrapper类

嘿，我来帮你搞定这两个jQuery相关的问题：

要移除元素的直接包裹父元素，jQuery提供了一个非常省心的方法——unwrap()。它的作用就是移除匹配元素的直接父级元素，同时完整保留匹配元素本身和它的内容。

举个实际场景的例子：
假设你的HTML结构是这样的：

<div class="wrapper-box">
  <span class="need-unwrap">这是需要去掉外层包裹的内容</span>
</div>

要移除.need-unwrap外面的.wrapper-box，只需要执行一行代码：

$('.need-unwrap').unwrap();

执行后HTML会变成：

<span class="need-unwrap">这是需要去掉外层包裹的内容</span>

如果你的元素有多层嵌套包裹，unwrap()每次只会移除最靠近目标元素的父级；要是想移除所有外层包裹，可以循环调用它直到元素达到你想要的层级，不过绝大多数场景下直接用unwrap()就足够解决问题了。

你观察得很准确——jQuery UI在执行带动画效果的show()方法时，会自动给目标元素套一个.ui-effects-wrapper容器类，动画结束后这个类不会自动消失。要移除它的关键是等动画完全结束后再操作，因为动画是异步执行的，直接在show()后面写移除代码会因为时机不对而失效。

我们可以利用show()方法的回调函数，在动画彻底完成后再处理这个类。结合你给出的代码，修改后的可用版本如下：

$('.desc').eq(0).show();
$('.tab-child').hover(function(){
  $('.desc').hide();
  $('.desc').eq($(this).index()).show("shake", 4000, function() {
    // 动画结束后，找到包裹当前元素的.ui-effects-wrapper并移除类
    $(this).parent().removeClass('ui-effects-wrapper');
  });
});

简单解释下：

• show()方法的第四个参数是动画完成后的回调函数，这里的this指向的是原本的.desc元素
• 此时.desc已经被.ui-effects-wrapper包裹，所以用$(this).parent()就能精准选中这个容器，再调用removeClass()移除目标类即可

如果你想直接去掉整个包裹容器（而不只是移除类），也可以把removeClass('ui-effects-wrapper')换成unwrap()，这样就能直接删掉.ui-effects-wrapper容器，让.desc回到原来的层级。

补充你的完整代码参考 #

引入脚本（和你原来的一致）：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>

HTML结构片段（按你给出的内容整理）：

<div class="tab">
  <div class="tab-child">...</div>
  <div class="desc">...</div>
  <!-- 其他相关元素 -->
</div>

内容的提问来源于stack exchange，提问作者Kiran Shahi