title: Removing parent elements and re-appending children
body: <p>I have a navigation that's a unordered list, here's the simple structure I'm following / have to follow for my jQuery plugin to work correctly, therefore making this code structure a necessity:</p>
  
  <pre><code>&lt;nav id="mp-menu" class="mp-menu"&gt;
  &lt;div class="mp-level"&gt;
      &lt;ul id="demo1" class="nav"&gt;
          &lt;li&gt;
              &lt;a href="#"&gt;Devices&lt;/a&gt;
              &lt;div class="mp-level"&gt;
              &lt;h2&gt;Devices&lt;/h2&gt;
              &lt;a class="mp-back" href="#"&gt;back&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Mobile Phones&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Televisions&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Cameras&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="#"&gt;Magazines&lt;/a&gt;
              &lt;div class="mp-level"&gt;
                  &lt;h2&gt;Magazines&lt;/h2&gt;
                  &lt;a class="mp-back" href="#"&gt;back&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#"&gt;National Geographic&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Scientific American&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/li&gt;
          ...
     &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>I need to provide a fallback and I have selected another jQuery plugin that needs to use a different structure to the above. I need to remove the DIV's with classname <code>.mp-level</code> but still keeping all unordered lists including <code>.mp-level</code> child lists.</p>
  
  <p>The result will just be unordered lists without headings and DIV'S. My code below is removing the correct elements but my issue is with re-inserting the child unordered lists (specifically level 2):</p>
  
  <pre><code>$( "#demo1 h2, .mp-back" ).remove();
  $( ".mp-level ul li .mp-level" ).detach();
  $( ".mp-level ul li" ).append('.mp-level ul li .mp-level ul');
  </code></pre>
  
  <p><strong>Anyone got any advice how to re-insert child UL's after I have removed their parents</strong>?</p>