How to remove all listeners in an element

Question

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     lt button id  btn  gt button lt  button gt    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

User · Answer

If you   re not opposed to jquery  this can be done in one line   jQuery 1 7       myEl   off     jQuery  lt  1 7      myEl   replaceWith     myEl   clone       Here   s an example   http   jsfiddle net LkfLezgd 3

User · Answer

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

User · Answer

Here s a function that is also based on cloneNode  but with an option to clone only the parent node and move all the children  to preserve their event listeners    function recreateNode el  withChildren      if  withChildren        el parentNode replaceChild el cloneNode true   el         else       var newEl   el cloneNode false       while  el hasChildNodes    newEl appendChild el firstChild       el parentNode replaceChild newEl  el           Remove event listeners on one element   recreateNode document getElementById  btn       Remove event listeners on an element and all of its children   recreateNode document getElementById  list    true       If you need to keep the object itself and therefore can t use cloneNode  then you have to wrap the addEventListener function and track the listener list by yourself  like in this answer

[javascript] How to remove all listeners in an element?

Examples related to javascript

Examples related to javascript-events

Examples related to addeventlistener