Fix - removeEventListener not working in JavaScript

avatar

Borislav Hadzhiev

Fri Dec 03 20212 min read

Fix - removeEventListener not working in JavaScript #

There are multiple reasons the removeEventListener method might not work:

  1. Not passing the same function to the addEventListener and removeEventListener methods.
  2. Using the bind method, which returns a new function when calling removeEventListener.
  3. Calling removeEventListener on a different DOM element than the addEventListener method.
  4. Registering the event listener twice - with and without the capture flag.

Here is the most common cause of the issue - passing 2 different functions to the addEventListener() and removeEventListener() methods.

index.js
const btn = document.getElementById('btn'); btn.addEventListener('click', function logger() { console.log('Button clicked'); }); // โ›”๏ธ Doesn't work - we define another function btn.removeEventListener('click', function logger() { console.log('Button clicked'); });
The function we passed to the 2 methods looks identical, however these are two different functions with completely different locations in memory.

To the JavaScript engine these 2 functions are not related in any way.

Instead, you should define the function and pass the same reference to the addEventListener and removeEventListener methods.

index.js
const btn = document.getElementById('btn'); function logger() { console.log('Button clicked'); } btn.addEventListener('click', logger); // โœ… Works btn.removeEventListener('click', logger);

We passed the same reference to both methods, so the removeEventListener method works as expected.

Another common cause of the removeEventListener method not working is using the bind method, which returns a new function.

index.js
const btn = document.getElementById('btn'); function logger() { console.log('Button clicked'); } btn.addEventListener('click', logger); // โ›”๏ธ Doesn't work - bind returns a new function btn.removeEventListener('click', logger.bind(null));

The bind() method returns a copy of the given function with the provided this value and initial arguments.

To avoid this issue, we can assign the return value from calling the bind() method to a variable and pass it to both the addEventListener and removeEventListener methods.

index.js
const btn = document.getElementById('btn'); function logger() { console.log('Button clicked'); } const boundLogger = logger.bind(null); btn.addEventListener('click', boundLogger); // โœ… Works btn.removeEventListener('click', boundLogger);

Another common cause of the removeEventListener method not working is calling the method on another DOM element.

index.js
const btn = document.getElementById('btn'); function logger() { console.log('Button clicked'); } btn.addEventListener('click', logger); // ๐Ÿ‘‡๏ธ Different DOM element const blueBtn = document.getElementById('blue-btn'); // โ›”๏ธ Doesn't work called on different DOM element blueBtn.removeEventListener('click', logger);

To solve the issue, make sure to call the removeEventListener method on the same element you called the addEventListener method on.

Lastly, you might also get this behavior if you called the addEventListener method twice - once without capture and once with capture.

index.js
const btn = document.getElementById('btn'); function logger() { console.log('Button clicked'); } btn.addEventListener('click', logger, true); btn.addEventListener('click', logger, false); // โ›”๏ธ Doesn't work registered with and without capture btn.removeEventListener('click', logger);

To resolve this issue, you have to remove each event listener separately.

index.js
const btn = document.getElementById('btn'); function logger() { console.log('Button clicked'); } btn.addEventListener('click', logger, true); btn.addEventListener('click', logger, false); // โœ… Works btn.removeEventListener('click', logger, true); btn.removeEventListener('click', logger, false);

We had to call the removeEventListener method twice to remove both events - the one that had the capture flag set and the one that didn't.

To resolve the removeEventListener not working issue, make sure to pass the same function to the addEventListener and removeEventListener methods. Passing a function that points to a different location in memory will not remove the listener.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee