使用jQuery删除父节点但保留子节点

Question

我希望用 jQuery 从 HTML 中删除父元素并保留子元素。以下代码可实现此功能：

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

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

纯JavaScript也可以做到这一点。

- Abs

Answer 1

你尝试过使用 jQuery 库中的 unwrap() 方法吗？如果它可以保留文本和注释，你可以将代码简化为：

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

如果你不想移除所有子元素，你可以使用以下修改过的 unwrap 方法扩展 jQuery（在这里找到），它将用其子元素替换一个元素：

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

然后使用它将会很容易：

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

- Cᴏʀʏ

---

我放弃使用unwrap，因为对于像ul这样具有子元素li的不同元素 - 我不想删除它们，但是unwrap会这样做。为了克服这个问题，我必须使用条件来检查它是什么类型的元素，然后计算取消包装的深度，但这对我行不通。 - Abs

你能展示一下你正在使用的实际HTML吗？此外，<li>元素不能存在于<ul>或<ol>之外--将它们解包应该会删除它们。 - Cᴏʀʏ

Answer 2

正如@Cory所说，unwrap()可以帮助您实现这个目标。

或者，您也可以像这样操作：

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

- totallyNotLizards

Answer 3

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>

1. 使用jQuery的.contents方法，可以从容器（#my_span）中获取内容，并将其保存为my_span_Content。
2. 然后，通过.replaceWith方法，将容器替换为其内容。

- alboth - undkonsorten.com

Answer 4

你可以尝试一下

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

- Keith.Abramo