jQuery | off() Method

Last Updated : 27 Feb, 2019

The off() Method in jQuery is used to remove event handlers attached with the on() method. The off() method brings a lot of consistency to the API and it replace unbind(), die() and undelegate() methods. Syntax:

$(selector).off(event, selector, function(eventObj), map)

Parameter: This method accepts four parameters as mentioned above and described below:

event: It is required parameter and used to specify one or more events or namespaces to remove from the selected elements. Multiple events are separated by space.
selector: It is optional parameter and used to match with the one originally passed to the on() method when attaching event handlers
function(eventObj): It is optional parameter and used to specify the function to run when the event occurs.
map: This parameter is used to specify the event map ({event:function, event:function, ...}) which contains one or more event attach to the elements, and functions to run when the events occur.

Example 1: This example removes the event handler.

html

<!DOCTYPE html>
<html>
    
<head>
    <title>
        jQuery off() method
    </title>

    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    
    <!-- Script to remove event handler -->
    <script>
        $(document).ready(function() {
            $("h3").on("click", function() {
                $(this).css("background-color", "green");
            });
            
            $("button").click(function() {
                $("h3").off("click");
            });
        });
    </script>
</head>

<body>
        <h3>GeeksforGeeks</h3> 
        
        <button>
            Click to remove event handler
        </button>
</body>

</html>

Output: Before Click on the element h3:

After Click on the element h3:

Example 2: This example use animate event to add animation effect one time and then remove the event handler.

html

<!DOCTYPE html>
<html>
    
<head>
    <title>
        jQuery off() method
    </title>
    
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    
    <!-- Script to animate the event -->
    <script>
        $(document).ready(function() {
            var x = 0;
            
            $("h3").click(function(event) {
                $("h3").animate({fontSize: "+=10px"
            });
            
            x++;
            
            if (x >= 1) {
                $(this).off(event);
            }
            });
        });
    </script>
</head>

<body style="text-align:center;">

    <h1>Welcome to GeeksforGeeks!.</h1> 
          
    <div style="background-color:green;">
        <h3>
            Geeks for Geeks. Click to increase
            the size (only one time)
        </h3>    
    </div>
</body>

</html>