Question

It looks like in jQuery after the element is destroyed, all jQuery-related data is being destroyed – including values saved with data(), all event handlers etc. However, the dom itself is preserved and can be used again. I wonder whether it is possible to retrieve this data in any easy way, or do I have to save it myself somehow and recreate it?

Simple example written in jquery: http://jsbin.com/examuh/2/edit . You can see the effect at http://jsbin.com/examuh/2 . As you can see, only the third handler works, which is added after reappending is working – even the one added after destroy, but before reappending is not working. Apparently, the DOM along with the #id is preserved.

PS: My real example is more complex, and remaking it to move the dom element to a safe place before destroying parent will be probably quite much of a hassle.

Answer 1

If you want to retain the event handlers and jquery data etc, you can use the jQuery method .detach() to remove the elements from the DOM. You can then re-insert it back into the DOM tree at a later date using the standard .append() / .prepend() etc methods.

If you use .remove() then the jQuery data is deleted. Your example seems to demonstrate that setting the html() property of a div has a similar effect to using .remove() in jQuery on the child elements of the div.

var keepThis = $("#toRemove").detach();
//.. later on
$("#insert-point").append(keepThis);