Languages
[Edit]
EN

jQuery - remove event with off method

5 points
Created by:
Root-ssh
175020

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

Note: off method has been introduced in jQuery 1.7.

Quick solutions

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

// 2. Removing all handlers for one event examples

// 2.1. Example 1 - directly from element
   $('#my-element').off('mouseover');

// 2.2. Example 2 - children filtered by selector
   $('body').off('mouseover', '.my-element');

// 3. Removing specific hanadler for one event examples

// 3.1. Example 1 - directly from element
   $('#my-element').off('click', onClick);

// 3.2. Example 2 - children filtered by selector 
   $('body').off('click', '.my-element', onClick);

// 4. Removing few events example

// 4.1. Example 1 - directly from element
   $('#my-element').off('mouseover mouseout');
// $('#my-element').off('mouseover mouseout', onMouse);

// 4.2. Example 2 - children filtered by selector 
   $('body').off('mouseover mouseout', '.my-element');
// $('body').off('mouseover mouseout', '.my-element', onMouse);

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.on('mouseover', function() {
          	mouseoverCounter += 1;
          
          	updateElement();
        });
      
      	element.on('mouseout', function() {
          	mouseoutCounter += 1;
          
          	updateElement();
        });

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

2. Removing all handlers for one event examples

2.1. Example 1 - directly from the element

// 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.on('mouseover', function() {
          	mouseoverCounter += 1;
          
          	updateElement();
        });
      
      	element.on('mouseout', function() {
          	mouseoutCounter += 1;
          
          	updateElement();
        });

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

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

2.2. Example 2 - children filtered by a selector

// 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 class="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 root = $('body');
        var element = $('.my-element');

      	var mouseoverCounter = 0;
      	var mouseoutCounter = 0;
      
      	function updateElement() {
        	var test = ' mouseover (' + mouseoverCounter + ');' +
                ' mouseout (' + mouseoutCounter + ');';
          
        	element.text(test);
        }
      
      	// '.my-element' can be replaced with any selector
        // it looks for '.my-element' elements inside root (<body>) element
        
        root.on('mouseover', '.my-element', function() {
          	mouseoverCounter += 1;
          
          	updateElement();
        });
      
      	root.on('mouseout', '.my-element', function() {
          	mouseoutCounter += 1;
          
          	updateElement();
        });

      
      	$('#my-mouseover-button').on('click', function() {
        	root.off('mouseover', '.my-element');
        });

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

3. Removing specific handler for one event examples

3.1. Example 1 - directly from the element

// 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.on('click', onClick1);
      	element.on('click', onClick2);
      	

      	$('#my-click-1-button').on('click', function() {
            // onClick1 reference has been used to add event
        	element.off('click', onClick1);
        });

       	$('#my-click-2-button').on('click', function() {
            // onClick2 reference has been used to add event
        	element.off('click', onClick2);
        });
    });
   
  </script>
</body>
</html>

3.2. Example 2 - children filtered by selector 

// 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 class="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 root = $('body');
        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();
        }
      
        // '.my-element' can be replaced with any selector
        // it looks for '.my-element' elements inside root (<body>) element
      	root.on('click', '.my-element', onClick1);
      	root.on('click', '.my-element', onClick2);
      	

      	$('#my-click-1-button').on('click', function() {
            // onClick1 reference has been used to add event
        	root.off('click', '.my-element', onClick1);
        });

       	$('#my-click-2-button').on('click', function() {
            // onClick2 reference has been used to add event
        	root.off('click', '.my-element', onClick2);
        });
    });
   
  </script>
</body>
</html>

4. Removing a few events example

4.1. Example 1 - directly from the element

// 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 mouseover and mouseout event handlers</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.on('mouseover', function() {
          	mouseoverCounter += 1;
          
          	updateElement();
        });
      
      	element.on('mouseout', function() {
          	mouseoutCounter += 1;
          
          	updateElement();
        });

      
      	$('#my-button').on('click', function() {
            // spaces separate removed events
            // as second parameter, function handle as additional criterion can be used
          	element.off('mouseover mouseout');
        });
    });
   
  </script>
</body>
</html>

4.2. Example 2 - children filtered by a selector 

// 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 class="my-element">Move mouse over or out...</div>
  <br />
  <button id="my-button">Remove all mouseover and mouseout event handlers</button>
  <script>

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

      	var mouseoverCounter = 0;
      	var mouseoutCounter = 0;
      
      	function updateElement() {
        	var test = ' mouseover (' + mouseoverCounter + ');' +
                ' mouseout (' + mouseoutCounter + ');';
          
        	element.text(test);
        }
      
      	
        // '.my-element' can be replaced with any selector
        // it looks for '.my-element' elements inside root (<body>) element
      	
        root.on('mouseover', '.my-element', function() {
          	mouseoverCounter += 1;
          
          	updateElement();
        });
      
      	root.on('mouseout', '.my-element', function() {
          	mouseoutCounter += 1;
          
          	updateElement();
        });

      
      	$('#my-button').on('click', function() {
            // spaces separate removed events
            // as third parameter, function handle as additional criterion can be used
          	root.off('mouseover mouseout', '.my-element');
        });
    });
   
  </script>
</body>
</html>

Merged questions

  1. jQuery - how to remove listener in element?
  2. jQuery - how to remove all listeners in element?

Alternative titles

  1. jQuery - how to remove event with off 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