Comment supprimer une UL parentale avec Jquery

Question

Mon CMS affiche la navigation en tant qu'UL. Je veux prendre cette UL et en utiliser seulement une partie pour une navigation latérale. Ce que j'essaie de faire est de supprimer l'UL parent et de montrer seulement l'UL emboîtée qui a les pages enfants. Voici un exemple

<ul id="mainnav"> 
<li> Main Nav 1 </li> 
<li> Main Nav 2 
    <ul id="subnav1"> 
     <li> Sub Nav 1 </li> 
     <li> Sub Nav 2 </li> 
     <li> Sub Nav 3 </li> 
    </ul> 
</li> 
<li> Main Nav 3 </li> 
</ul> 

Ce que je voudrais faire est que l'UL spectacle avec un id de « subnav1 » et supprimer le reste du menu. Je peux simplement masquer le fichier principal en utilisant "visibility: none" mais le menu prend toujours de la place. "display: none" cache tout le menu et je n'arrive pas à cibler uniquement le subnav1 ul. J'espérais que jquery me permettrait d'enlever le parent ul. Faites-moi savoir si quelqu'un a une suggestion. Merci.

Answer 1

jQuery.fn.outerHTML = function(s) { 
return (s) 
? this.before(s).remove() 
: jQuery("<p>").append(this.eq(0).clone()).html(); 
} 


$('#mainnav').outerHTML($('#subnav1').outerHTML()); 

Ceci supprimera l'UL principale du DOM.

Answer 2

solution du problème principal:

$("#subnav1").insertBefore($("#mainnav")); 
$("#mainnav").remove(); 

solution de problème secondaire: visiblité: aucune prendrait l'espace. Changez la position en relatif en utilisant css.

Answer 3

J'aime la réponse de pokrate mais je ne pense pas que cela fonctionnera comme écrit.

Voici les docs sur insertBefore: http://docs.jquery.com/Manipulation/insertBefore#selector

Selon l'exemple, il devrait être:

$("#subnav1").insertBefore("#mainnav"); 
$("#mainnav").remove();