EN
jQuery - remove event with off method
5
points
In this article, we would like to show you how to remove events with off method using jQuery.
Note:
offmethod 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>