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, 2020 in Java-Script by kartik
• 37,510 points
677 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, 2020 by Niroj
• 82,720 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, 2020 in Java-Script by Niroj
• 82,720 points
1,186 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, 2020 in Java-Script by Niroj
• 82,720 points
139 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, 2020 in Java-Script by Niroj
• 82,720 points
141 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, 2020 in Java-Script by Okugbe
• 280 points
127 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, 2020 in Java-Script by Niroj
• 82,720 points
2,342 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, 2020 in PHP by Niroj
• 82,720 points
2,528 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, 2020 in Angular by Niroj
• 82,720 points
2,447 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, 2020 in PHP by Niroj
• 82,720 points
1,491 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, 2020 in Java-Script by Niroj
• 82,720 points
444 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, 2020 in Java-Script by Niroj
• 82,720 points
139 views