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 from my understanding that's only called when the browser navigates away from the page.

Thanks in advance!

回答1:

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 differently
var 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.

回答2:

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.

回答3:

Try this:

(function($) {
    var _remove = $.fn.remove;
    $.fn.remove = function() {
        this.trigger('remove');             // notify removal
        return _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/

回答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.

来源：https://stackoverflow.com/questions/7685880/with-jquery-is-it-possible-to-have-a-function-run-when-a-dom-element-calls-rem

标签

javascript

jquery

html

dom

destructor