jQuery: Suppression d'élément HTML tout en gardant des enfants

Question

Je veux ajouter du code HTML comme ceci:

<div><img src="item.png"/>&nbsp;<a href="#"><span>Hello</span></a></div> 

mais dans certains cas, je besoin de se débarrasser de l'emballage d'un élément, il ressemble à ceci:

<div><img src="item.png"/>&nbsp;<span>Hello</span></div> 

Cet élément a peut être n'importe où dans des fragments HTML arbitraires. Je l'attrape par un [href = "#"]. Ce code HTML ne fait pas partie du DOM, il est ajouté au DOM après la suppression de l'élément a.

Je suis allé à toutes sortes de choses que jQuery propose pour cela, mais je ne l'ai pas fait. Mon principal problème est, qu'il semble y avoir aucun moyen d'appliquer un sélecteur HTML créé par jQuery comme ceci:

$("html code from above"); 

J'ai essayé d'obtenir l'un élément remplaçant par c'est HTML intérieur, mais tout mon constructions avec find() et replaceWith() échouent, la plupart du temps juste le <span>Hello</span> est laissé :(

Comment une jQuery-pro résoudre ce?

Answer 1

ce que vous devez faire est de définir le contexte de votre sélecteur. Voir cette référence: http://api.jquery.com/jquery/#selector-context

Dans votre cas, lorsque vous effectuez la sélection pour remplacer le lien, définissez le contexte en tant que fragment HTML que vous modifiez. Voici un exemple:

$(function() { 
    //create snippet 
    var mySnippet = $('<div><img src="item.png"/>&nbsp;<a href="#"><span>Hello</span></a></div>'); 

    //remove the link, using the snippet as the context 
    $('a[href="#"]', mySnippet).replaceWith($('a[href="#"]', mySnippet).html()); 

    //insert the modified snippet 
    $('body').append(mySnippet); 
}); 

Et voici une démo de ce en action (pas très excitant, mais montre que cela fonctionne): http://jsfiddle.net/Ender/dQ32B/

Answer 2

Ne serait-pas le unwrap fonction faire ce que vous voulez?

Si vous voulez juste enlever l'étiquette entourant (comme une ancre)