How to Remove an Event Handler using jQuery ? - GeeksforGeeks

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:  
 
saurabh1990aror
jQuery-Misc
JQuery
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to prevent Body from scrolling when a modal is opened using jQuery ?
jQuery | ajax() Method
Difference Between JavaScript and jQuery
How to get the value in an input text box using jQuery ?
jQuery | parent() & parents() with Examples
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?