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

PreviousJavaScript preventDefault NextJavaScript Page Load Events

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

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

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

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

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

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>

JavaScript removeEventListener

Example

Removing a Listener

Syntax

Anonymous Handlers Cannot Be Removed

Example

Store the Function First

Example

Removing from Inside the Handler

Example

The once Option Is Simpler

Example

Capturing Must Match

Example

Complete Example

Try It Yourself

Important Points

Conclusion