title: How to undelegate after event has fired only once
body: <p>I have an event wired up on a set of select lists (a.k.a. drop-down lists) that - upon firing their bound event - I need to remove the event from.</p>
  
  <p>Each select list has the 'change' event bound like so:</p>
  
  <pre><code>$('#batting-delivery-table tbody').delegate('select[id^="shot-"]', 'change', function () {
      $(this).find('option:first').remove();
  });
  </code></pre>
  
  <p>As soon as that first option in the list has been removed, I want to make sure no further options are deleted.  I've tried the following, but without any success:</p>
  
  <pre><code>$('#batting-delivery-table tbody').delegate('select[id^="shot-"]', 'change', function () {
      $(this).find('option:first').remove().undelegate($(this), 'change');
  });
  </code></pre>
  
  <p>I've also tried variations on "live"/"die" and would consider using $.one() if I could visualise how to arrange my code.</p>
  
  <p>Suggestions appreciated.</p>