Question

I have a <div> element that has a click event attached to it using the following code:

var id = "someId";
var elem = document.getElementById("elemId");
elem.addEventListener("click", function() { someFunction(id); }, false);

At a later point I copy the element and add it to another part of the DOM, but need to first remove the click event

var elem = document.getElementById("elemId");
elem.removeEventListener("click", ???? , false);

I’m not sure how to reference the listener and so far nothing I have tried has removed the event from the element.

Any ideas?

Answer 1

Move the anonymous click handler function out of the addEventListener call:

var id = "someId";
var elem = document.getElementById("elemId");
var elemEventHandler = function() { someFunction(id); };
elem.addEventListener("click", elemEventHandler , false);

after which you should be able to:

var elem = document.getElementById("elemId");
elem.removeEventListener("click", elemEventHandler , false);