Top community members
All Wiki Articles Create Wiki Article

Welcome to Dirask IT community! ‚̧ ūüíĽ
We are community of people that helps each other.

If you are beginner in IT field, you are more then welcome to ask questions, it will help you to learn faster. We are here to help you.

We are always beginner in something, we just need to remember it along the way.

there are no wrong questions - Ask Question

jQuery - how to remove event with off method?

0 contributions
5 points

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?
0 contributions

Checkout latest Findings & News:

Checkout latest questions:

Checkout latest wiki articles:

Hey ūüĎč
Would you like to know what we do?
  • Dirask is IT community, where we share coding knowledge and help each other to solve coding problems.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.
Read more