Question

In the jquery documentation of the “empty” function (http://api.jquery.com/empty/) there is the following statement:

"To avoid memory leaks, jQuery removes other constructs such as data and event handlers
from the child elements before removing the elements themselves."

The text says: “… jQuery removes event handlers from the !C H I L D! elements …”. But I want the event handlers also removed from the div tag ($(“#mydiv”).empty). I know that there is the function “remove”, but my intention is to not remove the div tag. What is the best way to get this done?

The other thing is:
When they say “remove event handlers”. Do they only remove constructs made with “bind” or do they also remove constructs made with “delegate”?

Thanks alot in advance

Answer 1

To remove all bound event handlers from an element, you can pass the special value "*" to the off() method:

$("#mydiv").empty().off("*");

When the documentation says remove events handlers, it only speaks of bound event handlers, not delegated ones, since these are bound to an ancestor element (or the document itself) which is not impacted by the removal.

This allows delegated handlers to keep working as intended if the removed element is reinstated later.