在 HTML 中使用 jquery 删除父元素但保留子元素答案

【问题标题】：remove parent element but keep the child element using jquery in HTML在 HTML 中使用 jquery 删除父元素但保留子元素
【发布时间】：2011-05-09 12:29:09
【问题描述】：

从下面的 HTML 我想删除 div 和 H2 标签，但使用 jquery 保留 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>

谢谢

【问题讨论】：

标签： jquery

【解决方案1】：

您可以使用replaceWith()

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

Working Demo

【讨论】：

不错的解决方案。如果您想保留 <h2> 中的内容，请使用 return $('ul, h2 *', this);
$('ul', this) 在功能上与$(this).find('ul') 相同，对吧？我以前没见过这种语法。
@Jeff 不完全，据此，find 更快，虽然 YMMV。 stackoverflow.com/q/2342282/54975
也许 functionally 是错误的副词。我只是想弄清楚他们是否返回相同的东西。听起来像他们。感谢您稍微扩展我的世界。
@Jeff 在这种情况下，是的 :) 他们都找到了从树中特定点开始的元素。

【解决方案2】：

我在尝试删除父元素时偶然发现了此页面（同时仍保留子元素） - 以防万一它对其他人有用，我发现 unwrap 正是我所需要的。对我来说，这是一个简单的查找元素并展开：

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

但是，在这种情况下添加的 h2 删除使事情变得更加复杂：

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

http://jsfiddle.net/t8uQ8/

以上应该更优化，因为它不依赖于使用匿名函数创建和调用。

【讨论】：

@AndreasM。〜嗯，奇怪的；很确定它曾经可以工作，但找不到它在 atm 的先前版本的 jQuery。为抬头干杯，已经更新了一个可以 100% 工作的版本，以及一个演示小提琴。

【解决方案3】：

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

这将删除元素（视觉上），但将其代码保留在变量中，然后您可以将其附加到另一个父级。

【讨论】：

他最好在其父级之后插入ul，然后从DOM中删除父级。

【解决方案4】：

正如@Silvain 所说，您可以detach 元素并将引用保存到变量。

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

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

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

【讨论】：