jQuery off() method

The off() method in jQuery removes an event handler attached using the jQuery on() method. This method is recommended to be used as it simplifies the jQuery codebase. The off() method replaces undelegate(), unbind(), and die() methods.

Syntax

This method accepts four parameters in which one is mandatory, and others are optional. The parameter values of the off() method are defined as follows.

event: It is the mandatory parameter. This parameter specifies one or multiple events or namespaces to remove from the selected elements. If we have to specify multiple events, the event values must be separated by a space.

selector: It is an optional parameter. It should match with the one initially passed to the .on() method when attaching event handlers.

function(eventObj): It is also an optional parameter. It is the function to run when an event triggers.

map: It is the event map.

We can also use the off() method without using any arguments. If it is called without any argument, the method will remove all handlers attached to the elements. If we have to remove a particular event handler, we can provide the combinations of event names, selectors, handler function names, or namespaces.

Now, let's see some illustrations to understand the use of off() method.

Example1

In this example, there are two h3 heading elements and a button. We have to hover the elements with text Hover me, to attach the mouseover event to them. The button will remove the event attached to the h3 element.

We can check the working of the off() method by first hovering an h3 element and then clicking the button. On hovering an h3 heading, the background-color of the corresponding h3 element will get changed, and when we click on the given button, the hovering will not affect another h3 element.

<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
   $(document).ready(function(){
   $("h3").on("mouseover",function(){
	   $(this).css({"background-color": "yellow", "font-size": "25px"});
      });
      $("#b3").click(function(){
         $("h3").off("mouseover");
      });
   });
</script>
</head>
<body>
<h2> It is an example of using the jQuery off() method. </h2>
<p> Move the cursor over the below heading to attach the mouseover event. </p>
<h3> Hover me </h3>
<button id = "b3"> Remove event </button>
<h3> Hover me </h3>
</body>
</html>

Test it Now

Output

After the execution of the above code, the output will be -

On hovering the first h3 element, the output will be -

After clicking the given button, when we hover the second h3 element, nothing will happen because the event is removed.

Example2

In this example, we are using the off() method to remove an event handler once the event has been triggered a certain number of times. Here, there is a heading h3 whose size can be increased only thrice. It is because the off() function will remove its click event once it is triggered three times. On every click, the size of the heading will increase by 4.5px.

<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
$(document).ready(function(){
var i = 0, j = 1;
$("h3").click(function(e){
$("h3").animate({fontSize: "+=4.5px"}).text(j + " times");
i++;
j++;
if (i >= 3) {
$(this).off(e);
}
});
});
</script>
</head>
<body>
<h2> It is an example of using the jQuery off() method. </h2>
<p> The style of the following heading can only be changed thrice. </br> Click the follwing text to see the effect. </p>
<h3> Click me </h3>
</body>
</html>

Test it Now

Output

After the execution of the above code, the output will be -