Question

我想删除父级并使用jQuery将子级保留在HTML中。这有效：

$('#my_span').children().insertBefore('#my_span').end().end().remove();

然而，它删除了文本和注释节点类型 - 我如何修改它以便保留文本？

很高兴用纯Javascript做到这一点。

Answer 1

您是否尝试在jQuery库中使用unwrap()方法？如果它保留了文本和注释，您可以将代码缩减为：

$('#my_span').unwrap();

如果您不希望删除所有子项，可以使用以下修改后的unwrap方法（found it here）扩展jQuery，该方法将使用子项替换元素：

$.fn.myUnwrap = function() {
    this.parent(':not(body)').each(function(){
        $(this).replaceWith( this.childNodes );
    });
    return this;
};

然后使用它会很容易：

$('#my_span').myUnwrap();

Answer 2

正如@Cᴏʀʏ所说，unwrap()应该可以帮助你实现这一目标。

或者，您可以这样做：

$('#my_span').parent().html($('#my_span').html());

Answer 3

你可以尝试

$($("#my_span")[0].inntHTML).insertBefore("#my_span");
$("#my_span").remove();

Answer 4

HTML：

<div id="my_span">
  <h2>headline</h2>
  <p>Hallo Du!</p>
</div>

JS / jQuery的

var my_span_Content = $("#my_span").contents();
$("#my_span").replaceWith(my_span_Content);

HTML结果

<h2>headline</h2>
<p>Hallo Du!</p>

您使用jQuery .contents 只需从中获取内容容器（ #my_span ）并将其保留为 my_span_Content 。
然后只需通过 .replaceWith

删除父级但使用jQuery保留子级

4 个答案: