usunięcia lub pusta zawartość pierwiastków

Question

Mam niektóre HTML tak:

<div>TEXT 
    <span>SPAN</span> 
     <a href="">LINK</a> 
</div> 

Chciałbym usunąć zawartość pierwiastków, zazwyczaj chciałbym zrobić coś takiego:

$('*').empty(); 

lub

$('*').contents().empty(); 

To spowoduje jednak usunięcie/opróżnienie pierwszego zakresu i jego zawartości, która jest div i link. Co mogę zrobić, aby zachować elementy podczas ich opróżniania? Wynik końcowy będzie więc następujący:

<span> 
    <div></div> 
    <a href=""></a> 
</span> 

Uwaga: szukam czegoś "uniwersalnego", które można zastosować do dowolnego kodu HTML. Powyższe jest tylko przykładem, w rzeczywistości struktura HTML zawierałaby więcej danych.

Example at JsFiddle

Answer 1

rekurencyjnie pętli wszystkich węzłów i usunąć wszystkie dzieci, których nodeType właściwość jest równa 3 (Node.TEXT_NODE). jQuery nie może wybrać tylko węzłów tekstowych, więc można to zrobić za pomocą wanilii JavaScript.

Przykład:

function removeText(node) { 
    if (!node || !node.childNodes || !node.childNodes.length) return; 
    for (var i=node.childNodes.length-1; i>=0; --i) { 
     var childNode = node.childNodes[i]; 
     if (childNode.nodeType === 3) node.removeChild(childNode); 
     else if (childNode.nodeType === 1) removeText(childNode); 
    } 
} 

Albo, zapakowane w plugin jQuery:

$.fn.removeText = function() { 
    for (var i=this.length-1; i>=0; --i) removeText(this[i]); 
    return this; 
}; 

http://jsfiddle.net/hcKsX/

Answer 2

Get dzieciom pozycji dominującej i ustawić ich html jak tak:

$('#myspan').children().html(''); 

jsFiddle

Answer 3

Rozwiązania te są w porządku, ale żadna z nich nie spełnia Twojego warunku.

Przykład 1: usunąć tekst wewnątrz węzłów liściowych

$('body *:not(:has(*))').empty() 

Wynik:

<span>SPAN 
    <div></div> 
    <a href=""></a> 
</span> 

Przykład 2: usunąć tekst wewnątrz dzieci jednego węzła

$('body span').children().html('') 

Wynik:

<span>SPAN 
    <div></div> 
    <a href=""></a> 
</span> 

(tak samo jak powyżej). Jednak to rozwiązanie nie zadziałałoby, gdyby istniało więcej niż 2 poziomy zagnieżdżania.

Inne rozwiązania mają podobne upadki.

Prawdziwy problem polega na tym, że nie ma dobrego sposobu na usuwanie tekstu z węzła, który jest jednocześnie węzłem nadrzędnym ORAZ węzłem tekstowym. Powinieneś albo zhakować coś razem, albo ponownie renderować swój widok za każdym razem.

Answer 4

To powinno usunąć wszystkie węzły tekstowe w drzewie DOM:

$('*').contents().filter(
    function() { 
    return this.nodeType == 3; 
}).remove();