Jquery Remove All Event Handlers Inside Element
36,209
Solution 1
jQuery will do the looping for you for just the direct children:
$("#div1").children().off();
or if you want all descendants:
$("#div1").find("*").off();
Solution 2
Does this help:
$("#div1").find('*').off();
Solution 3
Try with
$("#div1 >* ").off();
Or:
$("#div1").find('button').off();
if you're talking about <button>
elements
Author by
Nuvolari
Updated on December 19, 2020Comments
-
Nuvolari over 3 years
I have a div element with several elements inside it like buttons and so forth which have event handlers attached to them. I know its possible to go:
$("#button1").off()
To remove the handler for a button but I would like to do something like this if possible:
$("#div1").removeChildHandlers();
Is there a native function in JQuery to do this or would I have to loop them all the elements and remove 1 by 1?
-
Nuvolari over 11 yearsThanks I think that covered just about all possibilities I was looking for.
-
Kyle Tolle over 10 yearsThanks for this. I found it's hard to determine whether an event handler already exists without manually tracking it. Turning all the descendant handlers off allows me to just re-apply them right after. Likely not good for performance, but a quick solution is great to have!
-
Malcolm Salvador about 7 yearswhat is the main difference between
$("#div1").children().off()
from$("#div1").off()
? -
jfriend00 about 7 years@Malky.Kid -
$("#div1").off()
removes event handlers from only the#div1
element itself.$("#div1").children().off()
operates on only the children of#div
and does not operate on#div
at all. So, it depends upon which elements you want to operate on. -
Malcolm Salvador about 7 years@jfriend00 my gratitude
-
skobaljic almost 7 yearsInstead of
$("#div1").find('*')
one can use CSS selector$("#div1 *")
.