HTML Element .removeEventListener()

element.removeEventListener("eventName", function);

sample_removeEventListener.html

<button id="curse-btn">Activate Cursed Technique</button>
<button id="remove-btn">Seal</button>
<p id="output"></p>
<input id="search" type="text" placeholder="Search">
<p id="search-output"></p>

sample_removeEventListener.js

// Pattern 1: Basic usage — register and remove with a named function
var curseBtn = document.getElementById("curse-btn");
var removeBtn = document.getElementById("remove-btn");
var output = document.getElementById("output");
var count = 0;

function handleCurse() {
	count++;
	output.textContent = "Cursed technique activated " + count + " time(s) (Gojo Satoru)";
}

curseBtn.addEventListener("click", handleCurse);

removeBtn.addEventListener("click", function() {
	curseBtn.removeEventListener("click", handleCurse); // Remove using the same reference.
	output.textContent = "Technique sealed. No further activations possible.";
});

// Pattern 2: Anonymous functions cannot be removed (caution)
curseBtn.addEventListener("click", function() {
	console.log("This anonymous function cannot be removed");
});
// The following does NOT work — same code, different object.
// curseBtn.removeEventListener("click", function() { ... }); // Has no effect.

// Pattern 3: Automatically remove a listener after a set number of calls
var searchInput = document.getElementById("search");
var searchOutput = document.getElementById("search-output");
var searchCount = 0;

function handleSearch(e) {
	searchCount++;
	searchOutput.textContent = "Search: " + e.target.value + " (attempt " + searchCount + ")";
	if (searchCount >= 3) {
		searchInput.removeEventListener("input", handleSearch);
		searchOutput.textContent += " \u2190 Listener removed after 3 searches";
	}
}

searchInput.addEventListener("input", handleSearch);

View sample page

A listener registered with an anonymous function via element.addEventListener() cannot be removed with element.removeEventListener(). Even if the code looks identical, each anonymous function is created as a new object every time, so it is never considered the same reference.

// This approach cannot be removed.
btn.addEventListener("click", function() {
	console.log("Clicked");
});

// Even specifying a function with the same body does not match — it is a different object.
btn.removeEventListener("click", function() {
	console.log("Clicked");
}); // The listener is NOT removed.

element.removeEventListener() is a method that removes a registered event listener. Because you must pass the exact same function reference that was used during registration, always register listeners you intend to remove using named functions.

If you only need a listener to fire once, a more concise approach is to pass { once: true } as the third argument to element.addEventListener() instead of using element.removeEventListener().

Removing listeners that are no longer needed is also important for preventing memory leaks. In particular, if a registered listener remains after an element is removed from the DOM, memory may not be freed.