使用 jQuery 删除元素但保留文本

Posted 2023-03-07

【中文标题】使用 jQuery 删除元素但保留文本

【英文标题】：Remove element with jQuery but leave text

【发布时间】：2011-01-19 11:37:54

【问题描述】：

我有一些看起来像这样的 html：

<div>
    <span class="red">red text</span> some more text <span class="blue">blue text</span>
</div>

我想要做的是使用 jQuery 删除 div 中的所有跨度，无论附加类如何，但将跨度标签内的文本留在后面。所以最终的结果是：

<div>
    red text some more text blue text
</div>

我尝试使用unwrap() 方法，但它会打开 div。我也尝试删除元素，但删除了元素及其文本。

【参考方案1】：

jQuery 1.4+

你不想解开 span，你想解开它的内容：

$("span").contents().unwrap();

在线演示：http://jsbin.com/iyigi/edit

jQuery 1.2+

对于早期版本的 jQuery，您可以执行以下操作：

$("span").replaceWith(function () 
    return $(this).text();
);

在线演示：http://jsbin.com/iyigi/40/edit

【讨论】：

来自文档：从 DOM 中删除匹配元素集的父元素，将匹配元素留在原处。 所以我想这就是它应该如何工作的。如果有办法选择文本节点，那么您可以使用 unwrap。

实际上似乎不起作用，只是在上面的示例 HTML 上试了一下。编辑：我使用的是 1.3.2，猜测升级时间！

Erik，确保您使用的是 jQuery 1.4+

它删除所有跨度标签：P

@harshitgupta 它应该只是用它们的内容替换标签。我刚刚再次检查了演示，它似乎像宣传的那样工作。您是否正在完全丢失内容？

【参考方案2】：

一个简单的$('#my-div').text ($('#my-div').text ()) 就够了，不用解包吗？

【参考方案3】：

$(mydiv).html($(mydiv).text()) 

应该可以解决问题。

【讨论】：

如果来自.text() 的文本包含转义的HTML，那么使用.html(text) 将被呈现为实际的HTML。