To remove all event listeners from an element in JavaScript, use the Node.cloneNode() method and clone the element. Then use the Element.replaceWith() method to replace the original element with the cloned element. This will copy all the element’s attributes and values, but doesn’t copy the event listeners.
Finally, use the cloned element’s addEventListener() method to add back any event listeners that you want.
Node.cloneNode() Method
The Node.cloneNode() method creates a copy of a node, and returns the cloned node. The clone has no parent, so it is not part of the document until it is added to another node.
The method takes a single argument, which is a Boolean. If true, the clone includes all the child nodes of the original node; if false, it only clones the node itself, not its children.
Example
In the following example we create a clone of a <div> element, and then replace the original element with the clone.
<div id="original">
Original div
</div>
var original = document.getElementById('original');
// Make a clone of the original element
var clone = original.cloneNode(true);
Cloning an element copies all its attributes and values, but doesn’t copy event listeners.
Element.replaceWith() Method
The Element.replaceWith() method replaces an element with another element. It copies all the attributes and values from the old element to the new element, but event listeners are not copied.
Syntax
element.replaceWith(newChild);
Parameters
newChild
Required. The element to replace the specified element with. Can be either a string of HTML or an existing element.
Example
In the following example we create a clone of a <div> element, and then replace the original element with the clone.
<div id="original">
Original div
</div>
var original = document.getElementById('original');
// Make a clone of the original element
var clone = original.cloneNode(true);
// Replace the original element with the clone
original.replaceWith(clone);
Note that this will remove any event listeners from the children of the element as well.
How To Remove All Event Listeners From An Element In JavaScript
Here’s an example:
let el = document.getElementById('my-element');
let clone = el.cloneNode(true);
el.replaceWith(clone);
clone.addEventListener('click', function() {
// do something
});
Here’s the complete HTML and JavaScript:
<html>
<body>
<button id="my-element">Click me</button>
<script>
let el = document.getElementById('my-element');
el.addEventListener('click', function() {
alert('You clicked me!');
});
let clone = el.cloneNode(true);
el.replaceWith(clone);
</script>
</body>
</html>
In the above example, we first added an event listener to the button with id=”my-element”. Then we created a clone of the button using the cloneNode() method. Finally, we replaced the original button with the clone using the replaceWith() method.
The original button’s event listener gets removed when you replace it with the clone., but its attributes are copied.
This technique can be used to remove all event listeners from any element, not just buttons. It can also be used to add or remove event listeners from multiple elements at once.
Conclusion
In this article we saw how to remove all event listeners from an element in JavaScript. First we used the cloneNode() method to create a clone of the element. Then we used the replaceWith() method to replace the original element with the clone. The original element ‘s event listeners are removed when you replace it with the clone.