Wie Text entfernen (ohne innere Elemente entfernen) von einem übergeordneten Element jquery mit

Question

Stellen Sie sich vor, dass ich so etwas wie die folgenden (modifiziert nach http://viralpatel.net/blogs/jquery-get-text-element-without-child-element/)

<div id="foo"> 
    first 
    <div id="bar1"> 
     jumps over a lazy dog! 
    </div> 
    second 
    <div id="bar2"> 
     another jumps over a lazy dog! 
    </div> 
    third 
</div> 

haben, wie ich (nur Text) nur entfernen“ "," zweite "und" dritte "von DOM, ohne eines der untergeordneten Elemente zu beeinflussen.

Answer 1

Wenn Sie alle untergeordneten Textknoten entfernen möchten Sie .contents() verwenden können und dann .filter() den aufeinander abgestimmten Satz nur Textknoten zu reduzieren:

$("#foo").contents().filter(function() { 
    return this.nodeType === 3; 
}).remove();​​​​​​​ 

Hier ist ein working example.

Hinweis: Dadurch werden alle bestehenden Event-Handler für die untergeordneten Elemente, bewahren, die .html() mit Antworten werden nicht (da die Elemente aus dem DOM und wieder hinzugefügt in entfernt werden).

Anmerkung 2: Antworten in einigen der verknüpften Fragen zeigen einen ähnlichen Code wie in meiner Antwort hier, aber sie verwenden, um die nodeType Konstanten (z return this.nodeType === Node.TEXT_NODE). Dies ist eine schlechte Vorgehensweise, da IE unter Version 9 die Eigenschaft Node nicht implementiert. Es ist sicherer, die Ganzzahlen zu verwenden (die in der DOM level 2 spec gefunden werden können).

Answer 2

versuchen Sie dies:

$("#foo").html($("#foo").find("div"));​ 

Demo: http://jsfiddle.net/PXxC4/

Answer 3

Sie könnten dies verwenden.

$("#foo").html($("#foo").children());​ 

Answer 4

Hier ist eine nicht-jQuery-Version, die nur in allen gängigen Browsern zurück zum IE 5, arbeitet wie unscary Leben zu demonstrieren, ohne jQuery ist.

Demo: http://jsfiddle.net/timdown/aHW9J/

Code:

var el = document.getElementById("foo"), child = el.firstChild, nextChild; 

while (child) { 
    nextChild = child.nextSibling; 
    if (child.nodeType == 3) { 
     el.removeChild(child); 
    } 
    child = nextChild; 
}