使用jquery从段落中删除div

Question

我有以下问题：

我有：

<p class="site_text"><div>Some text</div></p>

我正在尝试删除div标签并保持文本不变，我有以下代码

$('p.site_text').remove('<div>');
$('p.site_text').remove('</div>');

不会从段落中删除div。有人可以帮忙吗？

关心，佐兰

Answer 1

您无法在div标记中加入p，它既违反了html规则，又无法在Chrome中使用。如果您将p替换为div，则可以使用以下代码：
JSFiddle：http://jsfiddle.net/aX3Hp/1/
JS：

$('div.site_text div').wrapInner('<span/>').children().unwrap();

HTML：

<div class="site_text"><div>Some text</div></div>

Answer 2

jQuery replaceWith（）

<p class="site_text">
    <!-- add some inline styles so we can see when div is removed -->
    <div style='color:red'>Some text</div>
    <div style='color:blue'>Another div</div>
</p>

$("div").each(function(){
   var obj = $(this);
   obj.replaceWith(obj.html());
});

• 演示：http://jsfiddle.net/s5CUF/2/（IE10，FF 20，Chrome 26）
• 请参阅：http://api.jquery.com/replaceWith/

有效期

但是，正如kpsuperplane指出的那样，起始HTML无效。它在运行此脚本后有效，但分层jQuery选择器将无法按预期工作（尝试），因为浏览器会尝试更正标记。

浏览器更像是解释你的结构：

<p class="site_text"></p>
<div style='color:red'>Some text</div>
<div style='color:blue'>Another div</div>
<p></p>

只要您注意到无效结构的选择器分支，即使标记无效，replaceWith()似乎也能正常工作。

使用更具限制性的选择器

您可能无法删除网站上的所有divs，但是您无法使用p来限定选择器，因为浏览器不会我认为div位于p内。

但是，您可以使用p的父级来限定选择器。

<!-- actual -->
<div id="searchresults">
    <p class="site_text">
        <div>Some text</div>
        <div>Another div</div>
    </p>
</div>

<!-- how the browser interprets -->
<div id="searchresults">
    <p class="site_text"></p>
    <div>Some text</div>
    <div>Another div</div>
    <p></p>
</div>

// a more restrictive selector
var divs = $("#searchresults > div");

• Example using an outer wrapper

Answer 3

虽然您的html无效，但仍然可以使用以下方法在类似的有效方案中执行：

$("p.site_text").each(function() {
  $(this).html($(this).children(":first").html());

}）;