Как удалить все дочерние узлы, но оставить фактические данные?

Question

Есть ли способ в jQuery удалить все дочерние узлы, но оставить текст в узле?

Такие, как:

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

Результат будет выглядеть так:

<div> 
    Hello 
</div> 

Answer 1

Попробуйте это:

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

Answer 2

Предполагая, что вы на самом деле хотите:

<div>Hello World</div> 

в результате:

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

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(); 
});