remove/restore elements, maintaining their events and element's children
- by Emin
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>