remove/restore elements, maintaining their events and element's children
<p>I came to a situation where I need to edit the following in a way that, on some event (lets assume the 'click' event in this case) I need to remove (or unwrap?) the <code>.container</code> and the <code>.header</code> and have the <code>.itemlist</code> still visible/available on the page. And then, I need to restore <code>.container</code> and <code>.header</code> back again on some other event, while still maintain the event listeners on the <code>a</code> tags, and if possible, without removing the said items from the DOM. Is this possible?</p>

<pre><code>&lt;ul class="container"&gt;
  &lt;li class="header"&gt;&lt;a href="#"&gt;delete&lt;/a&gt; | &lt;a href="#"&gt;edit&lt;/a&gt;&lt;/li&gt;
    &lt;ul class="itemlist"&gt;
       &lt;li&gt;some item&lt;/li&gt;
       &lt;li&gt;some other item&lt;/li&gt;
    &lt;/ul&gt;
&lt;/ul&gt;
</code></pre>
