title: Removing DOM event handlers in long-running browser session
body: <p>I have a browser interface with a <strong>ul#contacts</strong> list on the left and <strong>div#contact</strong> property panel (email, phone) on the right. Click a contact in the list and my app makes an XHR request to get the contact property HTML fragment and update div#contact.innerHTML.</p>
  
  <p>Each contact fragment has an "Edit Contact" link.  With JS, I progressively upgrade that link with an event listener that performs an XHR request to replace the static property panel with an in-place edit form.  This can happen many times during a single browser session.</p>
  
  <p>How should I clean up my "Edit Contact" event listener?  Do I need to remove it manually before the form overwrites the property panel?  Or is the event listener cleaned up automatically when the contents of div#contact (and the node that I'm listening on) is overwritten?  </p>
  
  <p>FWIW, I still consider IE6 to be part of my target market.</p>