jquery - 用 CSS 消除父元素？

Question

有没有办法在保留当前元素的同时消除父元素？

Here这是我的例子:

<div id="parent">
    <div id="child">
        <span>some text</span>
    </div>
</div>   

---

div
{
    padding: 20px;
}
#parent
{
    background-color: green;
}
#child
{
    background-color: red;
}

我正在寻找一种将父 div 替换为 child div 的方法。这意味着我采用 #parent 的父级，并将其内部 html 替换为 #child。
我试着玩弄 visibility ，但它仍然占用空间或隐藏整棵树。 有CSS方式吗？否则应该如何使用 jQuery 轻松完成？ (请注意，在我的真实场景中，它有一定的提升)。

Answer 1

您可以使用 .unwrap() :

Remove the parents of the set of matched elements from the DOM, leaving the matched elements in their place.

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

Updated Fiddle