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 .container and the .header and have the .itemlist still visible/available on the page. And then, I need to restore .container and .header back again on some other event, while still maintain the event listeners on the a tags, and if possible, without removing the said items from the DOM. Is this possible?

<ul class="container">
  <li class="header"><a href="#">delete</a> | <a href="#">edit</a></li>
    <ul class="itemlist">
       <li>some item</li>
       <li>some other item</li>
    </ul>
</ul>