title: JQuery - Detecting DOMNodeRemoved on self / garbage collection
body: <p>I apologize for the bad title, but I'm not sure how to word this.  I have logic that is attached to elements, and would like a destructor-like function to be called whenever the element is removed.  I've tried using DOMNodeRemoved as this trigger, however, this isn't working correctly, as:</p>
  
  <ul>
  <li>DOMNodeRemoved is only fired for the parents of elements, rather than the elements themselves.</li>
  <li>It seems to fire in a peculiar order, so sometimes I do not get the event properly for proper disposal.</li>
  </ul>
  
  <p>Code:  (or <a href="http://jsfiddle.net/cnurS/8/" rel="nofollow">fiddle</a>)</p>
  
  <pre><code>&lt;widget id="widget"&gt;
      &lt;div&gt;Widget 1&lt;/div&gt;
      &lt;widget id="widget2"&gt;
          &lt;div&gt;Widget 2&lt;/div&gt;
      &lt;/widget&gt;
  &lt;/widget&gt;
  
  &lt;input type="button" value="remove widget" /&gt;​
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>var Widget = function(element) {
      this.initialize(this.element = element);
  };
  
  Widget.prototype = {
      initialize: function() {
  
          // does not work for the elements at all
          $(this.element).on('DOMNodeRemoved', this.onRemoved.bind(this));
  
          // works, but is not optimal, fired whenever any node is removed.
          // DOMNodeRemovedFromDocument doesn't fire for me in latest Chrome
          $(this.element).parent().on('DOMNodeRemoved', this.onRemoved.bind(this));
  
          // here is code that adds to a manager
          console.log('ADD TO SOME MANAGER', $(this.element).attr('id'));
      },
  
      /**
       *  @private
       *  Callback for when the element is removed from the DOM
       */
      onRemoved: function(ev) {
  
          if (ev.target !== this.element) {
              return;
          }
  
          this.dispose();
      },
  
      /**
       *  My callback for disposal/destructor
       */
      dispose: function() {
  
          // here is code that removes from a manager
          console.log('REMOVE FROM SOME MANAGER', $(this.element).attr('id'));
      }
  };
  
  $(document).ready(function() {
  
      $(this.body).find('widget').each(function(index, element) {
  
         // store widget
         $(element).data('widget', new Widget(element));
  
      });
  
      $(this.body).find('input[type=button]').click(function() {
          $('#widget').remove();
      });
  
  });​
  </code></pre>
  
  <p>The code above should output:</p>
  
  <pre><code>// ADD TO SOME MANAGER widget
  // ADD TO SOME MANAGER widget2
  // REMOVE FROM SOME MANAGER widget2  (this should be here but isn't)
  // REMOVE FROM SOME MANAGER widget
  </code></pre>
  
  <p>Is there some sort of standard that is used to bind logic to elements in jQuery?  Or will I have to do some sort of monkey patching to override the "remove" method (not preferred, as some elements might get removed not using jquery's methods)</p>
  
  <p>Edit:  I don't care at all about IE.</p>