removeEventListener not working in JavaScript [Solved]

# removeEventListener not working in JavaScript [Solved]

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.

# Passing 2 different functions to addEventListener and removeEventListener

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

Copied!
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 references, stored in 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.

Copied!
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.

# Using bind() returns a new function

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

Copied!
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, assign the return value of calling the bind() method to a variable and pass it to both the addEventListener and removeEventListener methods.

Copied!
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);

# Calling removeEventListener on another DOM element

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

Copied!
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.

# Calling the addEventListener method twice

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

Copied!
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);

You have to remove each event listener separately to resolve the issue.

Copied!
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.

# Conclusion

To resolve the removeEventListener not working issue, make sure to pass the same function to the addEventListener and removeEventListener methods.

Passing a function that has a different reference will not remove the listener.