Comment supprimer du texte (sans supprimer les éléments internes) d'un élément parent en utilisant jquery

Imaginer que j'ai quelque chose comme ce qui suit (modifié à partir de 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>

Comment puis-je supprimer juste (que du texte) "premier", "deuxième" et "troisième" de DOM sans affecter les éléments d'enfant.

source d'informationauteur user203687

  1. 26

    Si vous souhaitez retirer tous les enfants de nœuds de texte vous pouvez utiliser .contenu() et puis .filtre() pour réduire la correspondance définie uniquement sur les nœuds de texte:

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

    Voici un exemple de travail.

    Note: Ce sera de préserver un événement existant gestionnaires sur les éléments d'enfant, quelles réponses à l'aide de .html() ne le fera pas (puisque les éléments sont supprimés de la DOM et d'un ajout).

    Note 2: les Réponses à certaines des questions liées montrent même code que dans ma réponse ici, mais ils utilisent la nodeType constantes (par exemple,return this.nodeType === Node.TEXT_NODE). C'est une mauvaise pratique depuis IE en dessous de la version 9 n'est pas de mettre en œuvre la Node de la propriété. Il est plus sûr d'utiliser les nombres entiers (qui peut être trouvé dans la DOM niveau 2 spec).

  2. 9

    Voici un non-version jQuery qui fonctionne dans tous les principaux navigateurs revenir à IE 5, afin de démontrer comment unscary vie sans jQuery.

    Démo: 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;
}
  3. 7

    essayez ceci :

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

    démo : http://jsfiddle.net/PXxC4/

  4. 2

    Vous pouvez utiliser cette.

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