使用jQuery在HTML中删除父元素但保留子元素

Question

我想在下面的HTML中使用jQuery删除div和H2标签，但保留UL标签。

请指导我如何实现这一点。

<div class="row">
    <h2><asp:Literal ID="categoryTitle" runat="server"></asp:Literal></h2>
    <ul class="tree js-catTree" id="treeContainer" runat="server"></ul>
</div>

感谢

- Amit

Answer 1

你可以使用replaceWith()方法。

$('.row').replaceWith(function() {
 return $('ul', this);
});

演示

- Town

---

好的解决方案。如果你想保留<h2>标签中的内容，请使用return $('ul, h2 *', this);。 - Gary Green

$('ul', this)在功能上与$(this).find('ul')是一样的，对吗？我以前没见过那种语法。 - Jeff

@Jeff 不完全正确，根据这个链接，find 更快，尽管结果可能因人而异。https://dev59.com/KnE95IYBdhLWcg3wXcvd - Town

也许“功能上”这个副词用错了。我只是想弄清楚它们是否返回相同的内容。听起来它们确实是一样的。感谢您为我的世界增添了一点点。 - Jeff

@Jeff 在这种情况下，是的 :) 它们都在树中从特定点开始查找元素。 - Town

Answer 2

我在尝试删除一个父元素时偶然发现了这个页面（同时保留子元素） - 以防对其他人有用，我发现unwrap正是我需要的。 对于我来说，只需找到一个元素并取消其包装即可：

$('.target-child').unwrap();

然而，在这种情况下添加h2删除会使事情变得更加复杂：

$('.row h2').siblings('ul').unwrap().end().remove();

http://jsfiddle.net/t8uQ8/

上述代码更优，因为不依赖于匿名函数的创建和调用。

- Pebbl

---

@AndreasM. ~ 嗯，奇怪；我很确定以前它是可以工作的，但现在找不到一个之前的 jQuery 版本在目前能够工作。感谢提醒，我已经更新了一个百分之百可行的版本，并附上了演示 fiddle。 - Pebbl

Answer 3

你可以使用 jQuery 的 detach() 函数吗？

这个函数可以将元素从页面上移除（视觉上），但仍保留其代码在一个变量中，然后你可以将它添加到另一个父元素中。

- Sylvain

---

他最好在父元素后插入ul，然后将父元素从DOM中移除。 - AlexMelw

Answer 4

正如@Silvain所言，你可以detach该元素并将其引用保存到变量中。

var $ul = $('.row h2').siblings('ul').detach();

然后，您可以在其父元素之后插入 ul，稍后从 DOM 中删除父元素：

$('.row').after($ul).remove();

- AlexMelw