JavaScript Events

JavaScript removeEventListener

Written by Swapnil RajaPublished 24 Aug 2026

removeEventListener detaches a handler, but only if it can identify it.

You have to pass the same function reference you added.

This is why anonymous handlers can never be removed.

Example

javascript

document.body.innerHTML = '<button id="btn">Go</button>';

const btn = document.getElementById("btn");
let count = 0;

function bump() {
  count = count + 1;
}

btn.addEventListener("click", bump);
btn.click();
btn.removeEventListener("click", bump);
btn.click();

console.log(count);

The output is 1, because the second click had no handler.

Removing a Listener

removeEventListener takes the same event name and function.

It must be the identical function, not one that merely looks the same.

Removing a listener that was never added does nothing and causes no error.

Syntax

javascript

element.removeEventListener("click", handler);

The handler must be a named reference.

Anonymous Handlers Cannot Be Removed

Each function expression creates a brand new function.

The one you try to remove is not the one you added.

Example

javascript

document.body.innerHTML = '<button id="btn">Go</button>';

const btn = document.getElementById("btn");
let count = 0;

btn.addEventListener("click", function () { count = count + 1; });
btn.removeEventListener("click", function () { count = count + 1; });

btn.click();

console.log(count);

The output is 1: the removal did nothing.

Store the Function First

Keeping it in a variable makes it removable.

Example

javascript

document.body.innerHTML = '<button id="btn">Go</button>';

const btn = document.getElementById("btn");
let count = 0;

const handler = function () {
  count = count + 1;
};

btn.addEventListener("click", handler);
btn.removeEventListener("click", handler);

btn.click();

console.log(count);

The output is 0.

Removing from Inside the Handler

A handler can take itself off once it has done its job.

Example

javascript

document.body.innerHTML = '<button id="btn">Go</button>';

const btn = document.getElementById("btn");
let count = 0;

function once() {
  count = count + 1;
  btn.removeEventListener("click", once);
}

btn.addEventListener("click", once);
btn.click();
btn.click();

console.log(count);

The once option does this for you.

The once Option Is Simpler

It removes the listener automatically after the first run.

Example

javascript

document.body.innerHTML = '<button id="btn">Go</button>';

const btn = document.getElementById("btn");
let count = 0;

btn.addEventListener("click", function () {
  count = count + 1;
}, { once: true });

btn.click();
btn.click();

console.log(count);

The output is 1, with no removal code at all.

Capturing Must Match

A listener added with capturing must be removed with capturing.

Otherwise the browser does not consider it the same listener.

Example

javascript

document.body.innerHTML =
  '<div id="box"><button id="btn">Go</button></div>';

const box = document.getElementById("box");
let count = 0;

function bump() {
  count = count + 1;
}

box.addEventListener("click", bump, true);
box.removeEventListener("click", bump, true);

document.getElementById("btn").dispatchEvent(
  new MouseEvent("click", { bubbles: true })
);

console.log(count);

Removing without the true would have left it attached.

Complete Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript removeEventListener</title>
</head>
<body>

  <h1>removeEventListener</h1>

  <button id="count">Count me</button>
  <button id="stop">Stop counting</button>

  <p id="out"></p>

  <script>
    const out = document.getElementById("out");
    const countBtn = document.getElementById("count");
    let total = 0;

    function bump() {
      total = total + 1;
      out.textContent = "Count: " + total;
    }

    countBtn.addEventListener("click", bump);

    document.getElementById("stop").addEventListener("click", function () {
      countBtn.removeEventListener("click", bump);
      out.textContent = "Stopped at " + total;
    });
  </script>

</body>
</html>

Try It Yourself

Run the above example in the Try It Editor.

Try an anonymous handler:

Replace bump with an inline function and see that stopping no longer works.

Important Points

removeEventListener needs the same function reference.
Anonymous handlers cannot be removed.
Store the handler in a variable to keep it removable.
A handler can remove itself from inside.
{ once: true } is simpler when you only need one run.

Conclusion

Removing listeners matters for anything that appears and disappears.

The rule is simple: you can only remove a function you can name.

For a single use, the once option saves all the bother.

PreviousJavaScript preventDefault NextJavaScript Page Load Events