How to remove a parent UL with Jquery
<p>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</p>

<pre><code>&lt;ul id="mainnav"&gt;
&lt;li&gt; Main Nav 1 &lt;/li&gt;
&lt;li&gt; Main Nav 2 
  &lt;ul id="subnav1"&gt;
      &lt;li&gt; Sub Nav 1 &lt;/li&gt;
      &lt;li&gt; Sub Nav 2 &lt;/li&gt;
      &lt;li&gt; Sub Nav 3 &lt;/li&gt;
  &lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt; Main Nav 3 &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>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.</p>
