How to Remove an Event Handler using jQuery ?

Here, the task is to remove an event handler in the jQuery/JavaScript. There are three methods to solve this problem which are discussed below:

Using unbind() method: It is an inbuilt method in jQuery which is used to remove any selected event handlers.

Syntax:

$(selector).unbind(event, function, eventObj)

Approach:

  • Select the selector on which the event handler is to be removed.
  • Use the unbind() method to remove event.
  • After click on the function under which unbind works will remove the event handler.

Example 1:



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>   
<html>   
    
<head>  
    <title>  
        jQuery | How to remove an event handler?
    </title>  
        
 </head>  
           
 <body style = "text-align:center;">   
       
    <h1 style = "color:green;" >   
        GeeksForGeeks   
    </h1
      
    <h3>
        Remove an event handler using unbind method
    </h3>
      
    <h4>Element to remove</h4>     
    <button>  
        Click Here  
    </button>  
            
    <script
        $(document).ready(function() { 
            $("h4").click(function() { 
                $(this).slideToggle(); 
            }); 
                
            $("button").click(function() { 
                $("h4").unbind(); 
            }); 
        }); 
    </script
</body>   
    
</html>  

chevron_right


Output:

  • Before click anywhere:
  • After click on the element h4:
  • After clicking on the button event will not work:

Using off() Method: It is used to remove event handlers attached with the on() method.

Syntax:

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

Approach:

  • Select the selector on which the event handler is to be removed.
  • Use the off() method to remove event.
  • After click on the function under which unbind works will remove the event handler.

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>   
<html>   
    
<head>  
    <title>  
        jQuery | How to remove an event handler?
    </title>  
        
 </head>  
           
 <body style = "text-align:center;">   
       
    <h1 style = "color:green;" >   
        GeeksForGeeks   
    </h1
      
    <h3>
        Remove an event handler using off method
    </h3>
      
    <h4>Element to remove</h4>     
    <button>  
        Click Here  
    </button>  
            
    <script
        $(document).ready(function() { 
            $("h4").click(function() { 
                $(this).slideToggle(); 
            }); 
                
            $("button").click(function() { 
                $("h4").off(); 
            }); 
        }); 
    </script
</body>   
    
</html>  

chevron_right


Outout:

  • Before click anywhere:
  • After click on the element h4:
  • After clicking on the button event will not work:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.