title: Best way to silently bind window resize event to jQuery plugin without keeping a reference to the targeted element
body: <p>I'm looking for best-practice advice.</p>
  
  <p>I'm writing a small jQuery plugin to manage horizontal scroll on elements.</p>
  
  <p>I need all the dom elements targeted by that plugin to update on window resize.</p>
  
  <p>Fact is, my website is a full ajax 'app' so when I remove DOM elements, I need them gone so memory doesn't leak. </p>
  
  <p>But I can't find a way to bind the resize event without keeping a reference to the DOM node.</p>
  
  <p>EDIT : </p>
  
  <p>Actually I need the resize handler to get the plugin-targeted elements at 'call' time, coz I don't want to keep any reference to those elements in memory, because <strong>I might call .html('') on a parent of theirs</strong>...</p>
  
  <p>I did not paste all my code, just an empty shell. I already have a destroy method that unbinds handlers. But I'm generating, removing and appending html nodes dynamically and I the the elements targeted by the plugin to remove silently.</p>
  
  <p>Kevin B stated I could override jQuery <code>.remove</code> method to deal with the handlers, but would have to load jQuery UI for it to work. I don't want that either..</p>
  
  <p>Here is what I tried (attempts commented):</p>
  
  <pre><code>(function($) {
      // SOLUTION 2 (see below too)
      // Not good either coz elements are not removed until resize is triggered
      /*
      var hScrolls = $([]);
      $(window).bind('resize.hScroll',function(){
          if(!hScrolls.length) return;
          hScrolls.each(function(){
              if($(this).data('hScroll')) $(this).hScroll('updateDimensions');
              else hScrolls = hScrolls.not($(this));
          });
      });
      */
      // END SOLUTION 2
  
      // SOLUTION 3 (not implemented but I think I'm on the right path)
      $(window).bind('resize.hScroll',function(){
          // need to get hScroll'ed elements via selector...
          $('[data-hScroll]').hScroll('updateDimensions');
          // I don't know how....
      });
      // END SOLUTION 3
      var methods = {
          init : function(options) {
              var settings = $.extend( {
                  defaults: true
              }, options);
  
              return this.each(function() {
                  var $this = $(this),
                      data = $this.data('hScroll');
                  if (!data) {
                      $this.data('hScroll', {
                          target: $this
                      });
                      // SOLUTION 1
                      // This is not good: it keeps a reference to $this when I remove it...
                      /*
                      $(window).bind('resize.hScroll', function(){
                          $this.hScroll('updateDimensions');
                      });
                      */
                      // END SOLUTION 1
                      $this.hScroll('updateDimensions');
  
                      // SOLUTION 2 (see above too)
  
                      hScrolls = hScrolls.add(this);
  
                  }
              });
          },
          updateDimensions: function(){
              var hScroll = this.data('hScroll');
              // do stuff with hScroll.target
          }
      }
  
      $.fn.hScroll = function(method) {
          if (methods[method]) {
              return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
          } else if ( typeof method === 'object' || !method) {
              return methods.init.apply(this, arguments);
          } else {
              $.error('Method ' + method + ' does not exist on jQuery.hScroll');
          }
      };
  })(jQuery);​
  </code></pre>
  
  <p>Thanks all in advance!</p>