[ACCEPTED]-How to remove all event handlers for child elements of a parent element using JQuery-jquery

You can use unbind() if you used bind() to attach the 3 events.

  $('#foo').children().unbind();
  $('#foo').children('.class').unbind(); //You can give selector for limiting clildren

or

Use off() if you used on() to bind events.

 $('#foo').children().off();
 $('#foo').children('class').off();   //You can give selector for limiting clildren

For 2 removing the event from all descendants 1 instead of direct children you can use Descendant Selector (“ancestor descendant”) .

$('#foo *').off(); 

Yeap - use off() with no params - that will unbind 3 all events bound.

$('#parent *').off();

If you meant literally 2 children, i.e. not children OR descendants, use 1 #parent > * instead.

I also wondered if I needed to manually 11 unbind every children of the removed element.

From 10 jquery documentation you shouldn't:

jquery docs for remove

If we 9 had any number of nested elements inside 8 , they would be removed, too. Other jQuery 7 constructs such as data or event handlers 6 are erased as well.

Since I was curious if 5 this was true I checked the source code:

function remove( elem, selector, keepData ) {
    var node,
        nodes = selector ? jQuery.filter( selector, elem ) : elem,
        i = 0;

    for ( ; ( node = nodes[ i ] ) != null; i++ ) {
        if ( !keepData && node.nodeType === 1 ) {
            jQuery.cleanData( getAll( node ) );
        }

        if ( node.parentNode ) {
            if ( keepData && jQuery.contains( node.ownerDocument, node ) ) {
                setGlobalEval( getAll( node, "script" ) );
            }
            node.parentNode.removeChild( node );
        }
    }

    return elem;
}

as 4 you can see:

jQuery.cleanData( getAll( node ) );

is cleaning all the events of 3 all the childrens of the removed element.

So 2 in the end: if you use $(element).remove() or .empty(), you are already 1 memory leak safe!

There are some cases where you don't want 28 to bind an event directly to an element. Rather, you 27 want to bind it to a parent element, like 26 "body" for example. This is essential when 25 you want to define your event listeners 24 globally but the element may not exist yet:

$("body").on("mouseenter", ".hover-item", function() {
    // do the thing
}

The 23 problem here is if you try to run .off() on 22 ".hover-item" it doesn't work. Alternatively, if 21 you try to use .off() on "body", using .children() as 20 recommended in the accepted answer, it doesn't 19 do anything either.

Instead of using .off(), I 18 believe it's best practice to bind your 17 events to a particular class name, and when 16 you want to disable those events, remove 15 the class name:

$(".the-element").removeClass(".hover-item");

Now that particular element 14 won't have the event listener enabled anymore. However, since 13 you technically defined the event listener 12 on "body", if you need to enable the hover 11 effect again at some later time, you can 10 just use addClass(".hover-item") and everything 9 will work just fine.

Now, this really only 8 applies in cases where you have one animation 7 for multiple items. Hover events are a good 6 example of this. Instead of applying different 5 hover events to different buttons for example, you 4 can apply the same event to all buttons. But 3 if you just want to disable hover events 2 for one particular button, this is the way 1 to go.