Languages
[Edit]
EN

jQuery - remove event with unbind method

6 points
Created by:
Blythe-F
620

In this article, we would like to show you how to remove events with unbind method using jQuery.

Note: unbind method has been marked as depricated in jQuery 3.0 - it will be removed some day from API so it is recommended to use off method instead. Article how to use off method you can find here.

Quick solutions

// 1. Removing all events from element example
   $('#my-element').unbind();

// 2. Removing all handlers for one event examples
   $('#my-element').unbind('mouseover');

// 3. Removing specific hanadler for one event examples
   $('#my-element').unbind('click', onClick);

Using jQuery it is possible to remove events in the following ways.

1. Removing all events from element example

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>
    
    div {
      	padding: 10px;
    	background: yellow;
    }
    
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>
  <div id="my-element">Move mouse over or out...</div>
  <br />
  <button id="my-button">Remove all events</button>
  <script>

    $(document).ready(function() {
      
		var element = $('#my-element');
      
      	var mouseoverCounter = 0;
      	var mouseoutCounter = 0;
      
      	function updateElement() {
        	var test = ' mouseover (' + mouseoverCounter + ');' +
                ' mouseout (' + mouseoutCounter + ');';
          
        	element.text(test);
        }
      
      	element.bind('mouseover', function() {
          	mouseoverCounter += 1;
          
          	updateElement();
        });
      
      	element.bind('mouseout', function() {
          	mouseoutCounter += 1;
          
          	updateElement();
        });

      
      	$('#my-button').bind('click', function() {
        	element.unbind();
        });
    });
   
  </script>
</body>
</html>

2. Removing all handlers for one event examples

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>
    
    div {
      	padding: 10px;
    	background: yellow;
    }
    
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>
  <div id="my-element">Click me or move mouse over...</div>
  <br />
  <button id="my-mouseover-button">Remove all mouseover events</button>
  <br /><br />
  <button id="my-mouseout-button">Remove all mouseout events</button>
  <script>

    $(document).ready(function() {
      
		var element = $('#my-element');

      	var mouseoverCounter = 0;
      	var mouseoutCounter = 0;
      
      	function updateElement() {
        	var test = ' mouseover (' + mouseoverCounter + ');' +
                ' mouseout (' + mouseoutCounter + ');';
          
        	element.text(test);
        }
      
      	element.bind('mouseover', function() {
          	mouseoverCounter += 1;
          
          	updateElement();
        });
      
      	element.bind('mouseout', function() {
          	mouseoutCounter += 1;
          
          	updateElement();
        });

      
      	$('#my-mouseover-button').bind('click', function() {
        	element.unbind('mouseover');
        });

        $('#my-mouseout-button').bind('click', function() {
        	element.unbind('mouseout');
        });
    });
   
  </script>
</body>
</html>

3. Removing specific handler for one event examples

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>
    
    div {
      	padding: 10px;
    	background: yellow;
    }
    
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>
  <div id="my-element">Click me...</div>
  <br />
  <button id="my-click-1-button">Remove click 1 event</button>
  <br /><br />
  <button id="my-click-2-button">Remove click 2 event</button>
  <script>

    $(document).ready(function() {
      
		var element = $('#my-element');

      	var click1Counter = 0;
      	var click2Counter = 0;
      
      	function updateElement() {
        	var test = 'click 1 (' + click1Counter + ');' + 
                ' click 2 (' + click2Counter + ');';
          
        	element.text(test);
        }
      
      	function onClick1() {
          	click1Counter += 1;
          
        	updateElement();
        }
      
      	function onClick2() {
          	click2Counter += 1;
          
        	updateElement();
        }
      
      	element.bind('click', onClick1);
      	element.bind('click', onClick2);
      	

      	$('#my-click-1-button').bind('click', function() {
        	element.unbind('click', onClick1);
        });

       	$('#my-click-2-button').bind('click', function() {
        	element.unbind('click', onClick2);
        });
    });
   
  </script>
</body>
</html>

Alternative titles

  1. jQuery - how to remove event with unbind method?
Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.

jQuery

Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join