从父级（jQuery）中剥离特定标签答案

【问题标题】：Strip specific tag from parent (jQuery)从父级（jQuery）中剥离特定标签
【发布时间】：2010-01-28 12:15:25
【问题描述】：

HTML：

<div class="featured">
    <h4><a href="#">Title 1</a></h4>
    <a href="#"><img src="image.png" class="image"/></a>
    <p><a href="#"></a><br />
    Description goes here</p>
</div>

<div class="featured">
    <h4><a href="#">Title 2</a></h4>
    <a href="#"><img src="image.png" class="image"/></a>
    <p><a href="#"></a></p>
    <p>Description goes here</p>
</div>

.. 如何从 .featured 中删除所有  标签？

谢谢

【问题讨论】：

标签： jquery html tags strip

【解决方案1】：

这可行，但只是因为您的段落元素位于 div 的末尾：

$(".featured p").each(function(){
    var content = $(this).html();
    $(this).parent().append(content);
    $(this).remove();
});

【讨论】：

.text() 不会返回您的子标签。
@Adam Kiss - 是的，改为 html()。不确定这是否值得投反对票:)
Deleted downvote - 它不起作用 :) 现在它起作用了 - 但是看看我的（编辑的）代码虽然 :) 测试过，不是append()，而是after()，所以它代替了已删除。

【解决方案2】：

查看Ben Alman's unwrap "plugin"

$.fn.unwrap = function() {
  this.parent(':not(body)')
    .each(function(){
      $(this).replaceWith( this.childNodes );
    });

  return this;
};

你的用法是：

$(".featured p > *").unwrap();

【讨论】：

【解决方案3】：

$(".featured p").remove();

这可以通过将每个  更改为  来实现。它就地执行此操作，因此 s 不必位于末尾（没有附加 - 它不会重新排序元素）：

$(".featured p").replaceWith(function(){
     return $('<span />').html( $(this).html() );
});

它使用的是html，所以元素会丢失数据和事件绑定。

【讨论】：

但是这样一来，你也会删除它的内容，据我了解，他只是想去掉标签。
完全正确。我只想去除标签，而不是内容。

【解决方案4】：

使用 jQuery 1.4 你可以这样做：

$(".featured p *").unwrap();
$(".featured p").each(function(){
  $(this).replaceWith("<span>"+ $(this).text() + "</span>")
});

测试一下here

文本节点不会被展开，因此您必须单独进行。我不确定为什么 replaceWith 要求它们在标签内。

【讨论】：

【解决方案5】：

这样的？

$(".featured p").each(
  function(){
    $(this).after($(this).html()).remove();
});

编辑 2：经过测试，有效。又好又简单。

【讨论】：

嗯，它只是一个想法，而不是解决方案，我没有测试过。
我仍然认为这是最接近要求的：P 不包括跨度，经过测试（最终），只是剥离包装器（在这种情况下为 ）：]