I have a browser interface with a ul#contacts list on the left and div#contact 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.

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.

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?

FWIW, I still consider IE6 to be part of my target market.