How to remove all listeners in an element?

0 votes

I have a button, and I added some eventlistners to it:

document.getElementById("btn").addEventListener("click", funcA, false);
document.getElementById("btn").addEventListener("click", funcB, false);
document.getElementById("btn").addEventListener("click", funcC, false);
document.getElementById("btn").addEventListener("blur" , funcD, false);
document.getElementById("btn").addEventListener("focus", funcE, false);

<button id="btn">button</button>

I can remove them by:

document.getElementById("btn").removeEventListener("click",funcA);

What if I want I want to remove all listeners at once, or I don't have the function reference (funcA)? Is there a way of doing that, or I have to remove them one by one?

Oct 7 in Java-Script by kartik
• 36,020 points
38 views

1 answer to this question.

0 votes

Hello @kartik,

I think that the fastest way to do this is to just clone the node, which will remove all event listeners:

var old_element = document.getElementById("btn");
var new_element = old_element.cloneNode(true);
old_element.parentNode.replaceChild(new_element, old_element);

Just be careful, as this will also clear event listeners on all child elements of the node in question, so if you want to preserve that you'll have to resort to explicitly removing listeners one at a time.

Hope it helps!!
Thank you!!

answered Oct 7 by Niroj
• 78,480 points

Related Questions In Java-Script

0 votes
1 answer

How to include csrf_token() in an external js file in Laravel?

Hello @kartik, To resolve this error you can ...READ MORE

answered Jun 11 in Java-Script by Niroj
• 78,480 points
626 views
0 votes
1 answer

How do I select an element with its name attribute in jQuery?

Hello @kartik, You can use: jQuery('[name="' + nameAttributeValue + ...READ MORE

answered Jun 11 in Java-Script by Niroj
• 78,480 points
83 views
0 votes
1 answer

How to validate an email address in JavaScript

Hello @kartik, To validate email use the below ...READ MORE

answered Jul 27 in Java-Script by Niroj
• 78,480 points
63 views
0 votes
2 answers

How can I set focus on an element in an HTML form using JavaScript?

Hi Kartik, try the following script <script>  (window.onload = ...READ MORE

answered Sep 24 in Java-Script by Okugbe
• 280 points
65 views
0 votes
1 answer

How to access PHP var from external javascript file?

Hello @kartik, You don't really access it, you ...READ MORE

answered Jul 6 in Java-Script by Niroj
• 78,480 points
870 views
0 votes
1 answer

How do I escape a single quote in SQL Server?

Hello @kartik, Single quotes are escaped by doubling ...READ MORE

answered Jul 21 in PHP by Niroj
• 78,480 points
982 views
0 votes
1 answer

How to specify a port to run a create-react-app based project?

Hello @kartik, You could use cross-env to set the port, ...READ MORE

answered Jul 22 in Angular by Niroj
• 78,480 points
940 views
0 votes
1 answer

How do you set a default value for a MySQL Datetime column?

Hello @kartik, In version 5.6.5, it is possible ...READ MORE

answered Aug 18 in PHP by Niroj
• 78,480 points
439 views
0 votes
1 answer

How to remove all child elements of a DOM node in JavaScript?

Hello @kartik, Use modern Javascript, with remove! const parent = ...READ MORE

answered Sep 21 in Java-Script by Niroj
• 78,480 points
141 views
0 votes
1 answer

How do I check if an element is hidden in jQuery?

Hello @kartik,  You can use CSS: class .hide { ...READ MORE

answered Jun 8 in Java-Script by Niroj
• 78,480 points
70 views