jquery - 使用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

您不能将 adiv放在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 替换（）

<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来限定选择器，因为浏览器认为.divp

但是，您可以使用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");

• 使用外包装的示例

Answer 3

尽管您的 html 无效，但您仍然可以在类似的有效场景中使用：

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

});