Languages
[Edit]
EN

jQuery - how to remove event with off method?

5 points
Created by:
Root-ssh
68980

Using jQuery it is possible to remove event with off method in following ways.

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 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 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 hanadler for one event examples

3.1. Example 1 - directly from 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 few events example

4.1. Example 1 - directly from 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 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?
Native Advertising
50 000 ad impressions - 449$
ūüöÄ
Get your tech brand or product in front of software developers.
For more information contact us:
Red dot
Dirask - friendly IT community for everyone.

‚̧ԳŹūüíĽ ūüôā

Join