With Jquery, Is It Possible To Have A Function Run When A Dom Element Calls .remove()?

As the question states, what I'm attempting to do is have a function that is called when a DOM element is removed from the DOM, much like a destructor. I looked into unload, but fr

Solution 1:

It is possible to use the special events to build removal tracking. I've created an example that allows to bind to an removed event. Note that this approach only works when the removal is initiated by jQuery (calling $(…).remove()) for example. For a more general solution use DOMNodeRemoved but that wouldn't work in IE.

To enable tracking for an element call $(…).trackRemoval() and the element will fire a removed event when you remove it or one of its parents.

// Create a scope so that our variables are not global
(function(){
    /**
     * True while unbinding removal tracking
     */var isUntracking = false;

    /**
     * A reference that is only known here that nobody else can play with our special event.
     */var dummy = function(){};

    /**
     * Special event to track removals. This could have any name but is invoked during jQuery's cleanup on removal to detach event handlers.
     */
    jQuery.event.special.elementRemoved = {
        remove: function(o){
            if(o.handler===dummy && !isUntracking){
                $(this).trigger('removed');
            }
        }
    };

    /**
     * Starts removal tracking on an element
     */
    jQuery.fn.trackRemoval = function(){
        this.bind('elementRemoved', dummy);
    };

    /**
     * Stops removal tracking on an element
     */
    jQuery.fn.untrackRemoval = function(){
        isUntracking = true;
        this.unbind('elementRemoved', dummy);
        isUntracking = false;
    };
})();

The jsFiddle contains sample code for usage.

Solution 2:

I don't know if it's that what you're looking for. Not really pretty code, just to show what I would like to use:

// Just for this script's sake, you'll want to do it differentlyvar body = $("body");
var element = $('#loadingBlock');

// Bind the "destructor" firing event
body.bind("elementDeleted", function (element) {
  // your "destructor" code
});

// Trigger the event, delete element, can be placed in a function, overloaded, etc.
body.trigger("elementDeleted", element);
element.remove();

There are of course solutions based on watching the DOM directly but the problem is the browser compatibility. You should probably check out mutation events.

Solution 3:

Try this:

(function($) {
    var _remove = $.fn.remove;
    $.fn.remove = function() {
        this.trigger('remove');             // notify removalreturn _remove.apply(this, arguments); // call original
    };
})(jQuery);

usage:

$(element).bind('remove', callback);
...
// some time later
$(element).remove();

See a working example at http://jsfiddle.net/alnitak/25Pnn/

Solution 4:

You could always Overload the Remove function (all javascript objects can be dynamically changes in runtime) and replace it with your own function that triggers an event you can use to react to remove.