Comment faire pour supprimer uniquement l'élément parent, et non ses éléments enfant en JavaScript?

Question

Disons:

<div>
some text
  <div class="remove-just-this">
  <p>foo</p>
  <p>bar</p>
  some text node here
  </div>
some text
</div>

pour cela:

<div>
some text
  <p>foo</p>
  <p>bar</p>
  some text node here
some text
</div>

J'ai essayé d'utiliser Mootools, jQuery et même (raw) en JavaScript, mais je ne pouvais pas avoir l'idée de comment faire cela.

Answer 1

À l'aide de jQuery , vous pouvez faire ceci:

var cnt = $(".remove-just-this").contents();
$(".remove-just-this").replaceWith(cnt);

Liens d'accès rapide à la documentation:

• contenu( ) : jQuery
• remplaceavec( contenu : [Chaîne | Élément | jQuery] ) : jQuery

Answer 2

La bibliothèque indépendant de la méthode consiste à insérer tous les nœuds enfants de l'élément à être retiré avant de lui-même (ce qui implicitement les retire de leur ancienne position), avant de la retirer:

while (nodeToBeRemoved.firstChild)
{
    nodeToBeRemoved.parentNode.insertBefore(nodeToBeRemoved.firstChild,
                                            nodeToBeRemoved);
}

nodeToBeRemoved.parentNode.removeChild(nodeToBeRemoved);

Cela vous permettra de déplacer tous les nœuds enfants à la bonne place dans le bon ordre.

Answer 3

Vous devriez assurez-vous de le faire avec les DOM, pas innerHTML (et si l'utilisation de jQuery solution fournie par jk, assurez-vous qu'il déplace les nœuds DOM, plutôt que d'utiliser innerHTML interne), afin de préserver les choses comme les gestionnaires d'événements.

Ma réponse est un peu comme insin, mais fonctionnera mieux pour les grandes structures (ajout à la fin de chaque nœud séparément peut être éprouvant, redessine où le CSS doit être renouvelée pour chaque appendChild; avec un DocumentFragment, cela se produit uniquement une fois qu'il n'est pas visible jusqu'à ce que après que ses enfants sont tous ajoutés et il est ajouté au document).

var fragment = document.createDocumentFragment();
while(element.firstChild) {
    fragment.appendChild(element.firstChild);
}
element.parentNode.replaceChild(fragment, element);

Answer 4

 $('.remove-just-this > *').unwrap()

Answer 5

La librairie que vous utilisez, vous devez cloner l'intérieur de la div avant de retirer la div extérieure de la DOM. Ensuite, vous devez ajouter la cloné à l'intérieur de la div à la place dans les DOM où la div extérieure est. Les étapes sont les suivantes:

1. Enregistrer une référence à l'extérieur de la div parent dans une variable
2. Copie de l'intérieur de la div à une autre variable. Cela peut être fait de façon rapide et sale par la sauvegarde de l' innerHTML de l'intérieur de la div à une variable ou vous pouvez copier l'intérieur de l'arbre de façon récursive de nœud en nœud.
3. Appelez removeChild sur la partie externe du div parent avec l'extérieur div comme argument.
4. Insérer la copie d'un contenu intérieur que l'extérieur de la div parent dans la position correcte.

Certaines bibliothèques se faire une partie ou de tout pour vous, mais quelque chose comme ci-dessus sera se cache sous le capot.