How to Remove Event Listeners from an Element Using the Chrome Console Utilities

Sometimes it can be useful to remove event listeners on a DOM element when you are testing some code on a web application.

This can be used to disable validation on inputs and forms or to disable specific actions that are executed in response to user interaction. This allows you to do some testing that you otherwise wouldn’t be able to do in a production environment, for example.

The standard way to remove event listeners is to use the removeEventListener() method of the element you are working with:

element.removeEventListener('click', handleClick);

However, this requires having a reference to the original event listener, handleClick in this example, that was registered to the element with addEventListener():

function handleClick() {
  // do something...
}

element.addEventListener('click', handleClick);

Once the code you’re working on reaches your web browser and goes through the process of transformation, transpilation, minification, bundling, and more, you likely won’t be able to access the event listeners you need to be able to remove them from the element you are testing.

At this point, you have a few options for removing event listeners without having any other information about the element you’re working with.

One of the most popular is cloneNode() and it’s pretty straightforward:

element = element.cloneNode(true);

This will replace your element with a “deep” clone, removing all event listeners that were added using addEventListener() and object properties like element.onclick.

This works well but what if you want to remove only certain types of event like click events?

You can use the Chrome Console Utilities API.

Like the Developer Tools that are commonplace in the Google Chrome Web Browser, the Console has a special API for interacting with web pages and applications. There are a few functions that are very useful, especially one named getEventListeners().

getEventListeners() does exactly what it says it does. When called with a DOM element it returns all the event listeners registered on the element, grouped by key:

The result of the function call is in the shape of an Object containing keys for each event type (click, blur, focus, etc.) and their corresponding arrays of event listener values.

You can use this function to not only remove all event listeners from an element, but to remove only the ones you need by filtering for the event types that you’re interested in.

Let’s write a function to do exactly that and call it removeEvents:

function removeEvents(target, type, useCapture) {
	if (typeof target === 'string') target = document.querySelector(target);

	const targetEvents = getEventListeners(target);

	Object.entries(targetEvents)
	.filter(([typeOf, events]) => type ? typeOf === type : true)
	.forEach(([typeOf, events]) => {
		events.forEach(e => {
			target.removeEventListener(typeOf, e.listener, useCapture);
			console.log('Removed listener', e, 'for', typeOf, 'on', target);
		});
	});
}

This small function takes in a target selector or DOM object/node/element and:

1. Gets all event listeners registered to the target (CSS selector or element).
2. Filters the event types by type if specified.
3. Removes the event listeners.
4. Logs which event listeners were removed from which target to the console.

Thanks to JavaScript’s entries(), filter(), and forEach() methods as well as the array destructuring syntax, working with the data structure provided by getEventListeners() doesn’t have to be awkward.

removeEvents(element, 'click'); // Remove click events

// Removed listener { ... } for click on <element>...</element>

removeEvents('#another-element'); // Remove all events

// Removed listener { ... } for...
// Removed listener { ... } for...
// Removed listener { ... } for...
// ...

It also has a parameter named useCapture that can remove events based on whether they were registered during the capturing or bubbling phase.

Now you can remove only the event listeners you don’t need and since it’s a function, you can target multiple elements very easily.

One important thing to note is that getEventListeners() is only available to use from within the Chrome Console so you cannot use it within scripts or any application code.