Delete item, but bind all data and events

Question

I have a container that can be inserted into any specified container on the page (for example, a popup). The popup should have a button that removes the parent. I tried using .remove() to remove the parent element, however it also removes the popup and its events. I want it to remove the popup (I still have the link), however I don't want .remove to .remove events.

So far, I got this:

 var popup = $('#popup'); $('body > div').on('click', function () { popup.appendTo($(this)); }); popup.find('button').on('click', function () { $(this).closest('div:not(#popup)').remove(); }); 

http://jsfiddle.net/volter9/0zms29g1/

Basically, is there a way to delete an item without deleting its data or events?

Thanks for attention!

PS: I tried to add and hide the popup in the body, but that is not what I need.

Answer 1

You can use .detach ()

The .detach () method is the same as .remove () , except that .detach () saves all jQuery data associated with deleted items. This method is useful when deleted items must be reinserted into the DOM at a later time.

You can also add a disconnect element to the DOM using the return value:

 var div = $("div").detach(); $(div).appendTo("body");