JavaScript Remove Event Listeners Without Handler Function

JavaScript has a function, removeEventListener, for removing event listeners from HTML elements. The drawback of this is that it requires you to provide the exact handler function to remove.

Without getting into why you might want to do this, browsers make it impossible for you to remove event listeners from HTML elements without providing the handler. There are pretty good security reasons for this.

A quick Google search provides multiple very similar answers that don't really address the issue. You either need to be the one adding the event listener in the first place. Or you can use the deprecated getEventListeners function, which is now only available in Chrome DevTools.

There is one other option, and that is to replace the HTML element in the DOM using the outerHTML property. This works great if you want to remove all listeners, but has the unfortunate side effect of removing the listeners from the child nodes too.

There is a way around this, however, and that is to store references to the child nodes, remove them, then update the outerHTML property, before finally adding the child nodes back to the HTML element. See below how to do that for the body element:

var nodes = [];
document.body.childNodes.forEach((node) => nodes.push(node));
document.body.innerHTML = "";
document.body.outerHTML = document.body.outerHTML;
nodes.forEach((node) => document.body.appendChild(node));

And that's it. The element should now be free of event listeners!