Remplacer élément parent avec son contenu

Je suis en train de faire quelque chose de semblable/même que dans cette question: How to remove only the parent element and not its child elements in JavaScript?Remplacer élément parent avec son contenu

<div> 
    This is some text here 
    <h2>This is more text</h2> 
</div>

Tout ce que je veux est de supprimer la balise H2. Le résultat devrait être:

<div> 
    This is some text here 
    This is more text 
</div>

Supposons que je l'élément H2 déjà:

if (parentElement.nodeName.toLowerCase() == "h2") { 
    //now what? I basically want to this: $.replaceWith(parentElement.innerText) 
    //just without jQuery 
}

Source

2012-08-17 Dennis G

obtenir le texte de l'élément h2 et le mettre dans var. efface le h2 entier et replace le texte là-bas. – 2619

duplicata possible de [Comment supprimer uniquement l'élément parent et pas ses éléments enfants en JavaScript?] (Http://stackoverflow.com/questions/170004/how-to-remove-only-the-parent-element-and- not-its-child-elements-in-javascript) –

J'ai voté pour fermer cette question. Si vous jetez un oeil aux autres réponses, ils fournissent déjà des solutions en langage JavaScript. Voir par exemple: http://stackoverflow.com/a/176404/218196 –

En supposant que la variable h2 références avec précision l'élément h2 vous voulez agir, mes premières pensées seraient:

var h2 = document.getElementsByTagName('h2')[0], 
    textnode = h2.firstChild; 

h2.parentNode.insertBefore(textnode,h2.nextSibling); 
h2.parentNode.removeChild(h2);

JS Fiddle demo.

Pour le rendre un peu plus sec, une approche de la fonction pourrait être:

function unwrapH2(el) { 
    if (!el) { 
     return false; 
    } 
    else { 
     var textnode = el.firstChild, 
      elParent = el.parentNode; 

     elParent.insertBefore(textnode, h2.nextSibling); 
     elParent.removeChild(h2); 
    } 
} 

var h2 = document.getElementsByTagName('h2')[0]; 

unwrapH2(h2);

JS Fiddle demo.

Ajusté ci-dessus en réponse aux commentaires de Felix Kling (ci-dessous), et aussi à utiliser replaceChild():

function unwrapH2(el) { 
    if (!el) { 
     return false; 
    } 
    else { 
     var textnode = el.firstChild, 
      elParent = el.parentNode; 
     elParent.replaceChild(textnode,el); 
    } 
} 

var h2 = document.getElementsByTagName('h2')[0]; 

unwrapH2(h2);

JS Fiddle demo.

Source

2012-08-17 09:57:58

'var textnode = h2.firstChild;' est suffisant. Je pense aussi que vous pourriez simplement faire 'h2.parentNode.replaceChild (textnode, h2)'. –

C'était rapide. Parfait! –

De rien, je suis content d'avoir été utile! @Fixix, bien sûr; Je vous remercie! =) –

Tout d'abord, commencer sur jQuery. Cela rend votre vie plus facile.

En jQuery, procédez comme suit:

var h2html = $('div h2').html(); 
$('div h2').remove(); 
$('div').append(h2html);

EDIT:

ci-dessus fonctionne uniquement avec 1 div et 1 élément h2, qui est le dernier élément de la div. C'est juste un exemple rapide. Ci-dessous le code qui rend votre vie encore plus facile:

$('div h2').each(function (x, y) { 
    $(this).replaceWith($(this).html()); 
});

Source

2012-08-17 09:52:00 Hidde

Si l'OP voulait utiliser jQuery, il pourrait simplement utiliser le code dans la question liée. En outre, votre code n'est pas correct. Il remplace le contenu de chaque 'div' par le contenu du premier élément' h2'. Il conserve les nœuds de texte existants dans les éléments 'div'. –

Cela me facilite la vie, mais pour un bouton et 4 lignes de Javascript, il serait stupide de sortir toute la bibliothèque. –

@FelixKling Bien sûr, cela ne fonctionne pas pour plus de 1 div + h2. C'est juste pour montrer l'idée ... – Hidde

Utilisez JS moderne!

const h2 = document.getElementsByTagName('h2')[0]; 
h2.replaceWith(h2.firstChild);

Pour remettre en place au lieu de tous les enfants, utilisez:

h2.replaceWith(...h2.childNodes); // or h2.children, if you don't want textNodes

Source

2017-08-13 05:04:51 Gibolt

Remplacer élément parent avec son contenu

Répondre

Questions connexes