Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to Remove an Event Handler using jQuery ?

  • Last Updated : 24 Oct, 2021

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: 
 

html




<!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

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: 
 

html




<!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

Output: 
 

  • Before click anywhere: 
     

  • After click on the element h4: 
     

  • After clicking on the button event will not work: 
     

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!