[Résolu] JQuery : supprimer des balises sans supprimer leur contenu

Bonjour,

Tout est dans le titre. Pour donner un exemple, je cherche à supprimer toutes les balises qui se trouvent dans .removetag (les balises <h2> en l'occurence) tout en gardant leur contenu :

<div class="removetag">
    <h2>Le contenu</h2>
</div>

J'ai essayé tout un tas de choses avec les méthodes .html() et .text() de jQuery... mais quelque chose m'échappe, et je ne serais pas contre un petit coup de pouce.

Merci à vous
Modifié par Olivier C (13 Mar 2015 - 13:06)

Hmmm...

Ceci fonctionne :

$('.removetag').html($('.removetag').text());

C'est juste que je n'arrive pas à l'implémenter dans le reste de mon code. Je ne dois pas être bien loin.

Aller : je mets "résolu"...

Edit : la bonne méthode a été postée plus bas.
Modifié par Olivier C (17 Mar 2015 - 07:26)

Salut,

la "méthode" unwrap() ?

Pour ceux que ça intéresse, une solution sans framework:

for (var t=document.querySelectorAll('.removetag'), n=t.length, sel=document.createRange(), i=0; i<n; i++) {
var item  = t[ i ];
sel.selectNodeContents(item);
var frag = sel.extractContents();
item.parentNode.insertBefore(frag, item);
item.parentNode.removeChild(item);
}

Garanti IE9+

niuxe a écrit :
la "méthode"unwrap() ?

Elle supprime seulement les éléments parents, à ce que j'en comprends tout au moins. (Edit : Erreur de ma part, voir mon message plus bas...)

Je sais que la méthode que j'ai postée plus haut est la bonne, mais alors pour ce qui est de l'intégrer dans mes scripts...
Modifié par Olivier C (17 Mar 2015 - 07:25)

au passage et vu que je tombe sur le sujet , un genre de css
display:transparent serait tres bienvenu

on retrouve souvent dans les cms de type joomla du code html épouvantable avec des quantités de div imbriqués pour rien, les rendre transparent facilement serait un plus

QuentinC a écrit :
Pour ceux que ça intéresse, une solution sans framework:

for (var t=document.querySelectorAll('.removetag'), n=t.length, sel=document.createRange(), i=0; i<n; i++) {
var item  = t[ i ];
sel.selectNodeContents(item);
var frag = sel.extractContents();
item.parentNode.insertBefore(frag, item);
item.parentNode.removeChild(item);
}

Garanti IE9+

Merci pour ta solution Quentin, je l'adopte au sein de mon code jQuery en attendant.

Grâce à elle j'ai trouvé ce qui n'allait pas dans mon code : une question de sélecteur. Lié à un problème de boucle .each() ça commençais à faire beaucoup de dysfonctionnements et je n'arrivais pas à débugger.

Une autre solution :

$( selecteur ).contents().unwrap();

Où sélecteur désigne ton l'élément que tu souhaite dénuder (ici h2)
Modifié par Freez (16 Mar 2015 - 20:35)

Freez a écrit :

$( selecteur ).contents().unwrap();

Bien vu Freez,

.contents() était bien la méthode qui me manquait. Je l'ai découverte pas plus tard qu'hier, en lisant un bouquin jQuery, mais je n'avais pas pensé à revenir sur ce code.

C'est chose faite, et merci.