Question

我在字符串中有这样的HTML：

<div style="" class="">
    <div style="" class="">
        <h1>test</h1>
        <p>
            text
        </p>
    </div>
</div>

如何使用jQuery删除<div>并保留内部HTML：

<h1>test</h1>
<p>
    text
</p>

Answer 1

使用.unwrap();

来自文档：

描述：从DOM中删除匹配元素集的父元素，将匹配的元素留在原位。

＆＃13;

$('p, h1').unwrap().unwrap();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="" class="">
    <div style="" class="">
        <h1>test</h1>
        <p>
            text
        </p>
    </div>
</div>

＆＃13;

Answer 2

最简单的方法是使用unwrap这样的方法：

$('div').contents().unwrap('div');

查看下面的演示。

＆＃13;

$('button').click(function() {
    $('div').contents().unwrap('div');
});

＆＃13;

div {
    border: 1px red solid;
    padding: 10px;
}
div div {
    border-color: green
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="" class="">
    <div style="" class="">
        <h1>test</h1>
        <p>
            text <button>Remove div's</div>
        </p>
    </div>
</div>

＆＃13;

从HTML字符串中删除div元素

2 个答案: