Should I remove event handlers from element before removeChild?

Question

Say, I have an element as <img id="foo" /> and attached some events, e.g click (not inline onclick!).

// somewhere i wrote
foo.addEventListener("click", clickHandler, false);
...
// somewhere i will write
foo.parentNode.removeChild(foo);

Do I need to remove all events too?

Answer 1

The documentation on jQuery's empty() method says:

To avoid memory leaks, jQuery removes other constructs such as data and event handlers from the child elements before removing the elements themselves.

So: 1) if we didn't remove event handlers explicitly, We'd get memory leaks, and 2) By using empty(), We can avoid this memory leaks.

Also See this do-events-handlers-on-a-dom-node-get-deleted-with-the-node