刪除父級但使用jQuery保留子級

Question

我想刪除父項並使用jQuery將子項保留在我的HTML中。 這有效：

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

但是，它刪除了文本和注釋節點類型 - 我如何修改它以便保留文本？

很高興用純Javascript做到這一點。

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();

Answer 2

正如@Cᴏʀʏ所說，unwrap unwrap()應該可以幫助你實現這個目標。

或者，您可以這樣做：

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

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替換容器及其內容

Answer 4

你可以試試

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