How to use the jQuery.unbind() method on all child elements

In this tutorial I will show you how you can unbind all events from an element and all of its children using the jQuery Library. I will show you how you can use a function I wrote that will take an element and recursively unbind all click events with the help of jQuery. If you want, you can skip the reading and get the function code below.

Working With Events

The jQuery framework makes managing and working with events very easy and clean. If you were to use the jQuery “click” method on a DOM element, the library will keep track of that binding from there. With jQuery you could choose to handle clicks with the “bind” method instead and have the same result. If you bind an event with jQuery you can later use the jQuery “unbind” method and rest assured that everything has been cleaned up correctly.

On the other hand if you were to use the “onclick” attribute on a DOM element, you may or may not be able to use “unbind” effectively. I’ll show you how we can take care of both with one function.

Binding Event Handlers

Let’s start with some HTML.

<a id="getanswerlink" href="">Click here</a> to find the Answer to the Ultimate Question of Life, the Universe, and Everything.

In this example we want to allow the user to click the link and be alerted the answer to the question. Here is our JavaScript click event handler.

function AlertTheAnswer(){
    alert('The answer is "42"');
}

As explained earlier there are a couple ways we could bind the event. One would to use the “onclick” attribute.

<a id="getanswerlink" href="" onclick="AlertTheAnswer(); return false;">Click here</a> to find the Answer to the Ultimate Question of Life, the Universe, and Everything.

Another way would be to bind using jQuery. We could use either the “click” method or the “bind” method.

// using the click method
$('#getanswerlink').click(function(){ AlertTheAnswer(); return false;});
// using the bind method
$('#getanswerlink').bind('click', function(){ AlertTheAnswer(); return false;});

Undoing The Binds

Now that the click event is bound and working properly let’s look at unbinding the event handler from the anchor link. If we had used the “onclick” attribute we could safely remove the click event handler like this.

$('#getanswerlink').removeAttr('onclick');

If we had chosen to use either the “bind” or “click” method then we could do this to unbind the handler.

$('#getanswerlink').unbind('click');

Unbinding Event Handlers Recursively

Now let’s look another scenario.

<div id="container">
 
    <a id="sayhellolink" href="">Say "Hello"</a>
    <br />
    <a id="saygoodbyelink" href="" onclick="Say('Goodbye!'); return false;">Say "Goodbye"</a>
    <br />
    <span>
        <a id="saycheeselink" href="" onclick="Say('Cheese!'); return false;">Say "Cheese"</a>
    </span>
    <br />
    <div>
        <div>
            <button id="sayyouloveme">Say you love me!</button>
        </div>
    </div>
 
</div>
 
<script type="text/javascript">
    $(document).ready(function(){
        $('#sayhellolink').click(function(){ Say('Hello!'); return false;});
        $('#sayyouloveme').bind('click',function(){ Say('I love you!'); return false;});
    });
</script>

We have four things that can be clicked. To illustrate functionality I’ve used the three ways of binding that we looked at earlier. Binding the click event handlers was easy enough. Now, we can unbind the handlers one by one, or we can make one function call to unbind everything from the div “container” and down.

The Recursive Event Unbind Function

Here is the JavaScript function that will unbind everything for us using jQuery.

function RecursiveUnbind($jElement) {
    // remove this element's and all of its children's click events
    $jElement.unbind();
    $jElement.removeAttr('onclick');
    $jElement.children().each(function () {
        RecursiveUnbind($(this));
    });
}

To use the function in the previous example we would call the function passing it the “container” div as a jQuery object.

RecursiveUnbind($('#container'));

After running the function you will see that all click events have been removed.

Complete Example

For your convenience here is a complete working example that utilizes the RecursiveUnbind method.

<html>
    <head>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
 
            function RecursiveUnbind($jElement) {
                // remove this element's and all of its children's click events
                $jElement.unbind();
                $jElement.removeAttr('onclick');
                $jElement.children().each(function () {
                    RecursiveUnbind($(this));
                });
            }
 
            function Say(what){
                alert(what);
            }
 
            $(document).ready(function(){
                $('#sayhellolink').click(function(){ Say('Hello!'); return false;});
                $('#sayyouloveme').bind('click',function(){ Say('I love you!'); return false;});
            });
 
        </script>
    </head>
    <body>
 
        <div id="container">
 
            <a id="sayhellolink" href="">Say "Hello"</a>
            <br />
            <a id="saygoodbyelink" href="" onclick="Say('Goodbye!'); return false;">Say "Goodbye"</a>
            <br />
            <span>
                <a id="saycheeselink" href="" onclick="Say('Cheese!'); return false;">Say "Cheese"</a>
            </span>
            <br />
            <div>
                <div>
                    <button id="sayyouloveme">Say you love me!</button>
                </div>
            </div>
 
        </div>
 
        <a id="unbindall" href="" onclick="RecursiveUnbind($('#container')); alert('Everything has been unbound!'); return false;">Unbind Everything!</a>
 
    </body>
</html>