How to remove a parent UL with Jquery

Question

My CMS renders out the navigation as a UL. I want to take that UL and use only part of it for a side nav. What I'm trying to do is remove the parent UL and show only the nested UL that has the child pages. Here's an example

<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>

What I'd like to do is show only the UL with an id of "subnav1" and remove the rest of the menu. I can just hide the main ul using "visibility: none" but the menu still takes up space. "display: none" hides the whole menu and I can't seem to target just the subnav1 ul. I was hoping jquery would allow me to remove the parent ul. Let me know if anyone has a suggestion. Thanks.

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());

This will remove the main UL from the DOM.

Answer 2

Main problem solution:

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

Secondary problem solution: visiblity:none would take up the space. Change the position to relative using css.

Answer 3

I like pokrate's answer but I don't think it will work as written.

Here are the docs on insertBefore: http://docs.jquery.com/Manipulation/insertBefore#selector

According to the example it should be:

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