如何删除所有子节点，但保留实际数据？

Question

jQuery中是否有办法删除所有子节点，但将文本保留在节点中？

如：

<div>
    Hello
    <span>World</span>
</div>

结果将是：

<div>
    Hello
</div>

Answer 1

假设您实际想要：

<div>Hello World</div>

结果是：

var node = $('#yourDiv');
node.text(node.text());

Answer 2

试试看：

$('div').children().remove()

Answer 3

这是一个简单的插件，可以为您递归执行此操作（如果您有多个深度的孩子）：

$.fn.extend({ 
    stripChildren : function() {
       $(this).children().each(function() { 
          if ($(this).children().size() > 0)
            $(this).stripChildren();
          else
            $(this).replaceWith($(this).html());
            $(this).parent().stripChildren();
       }); 
    }
});

要使用它很简单：

$(document).ready(function() {
    $('div').stripChildren();
});