Remove multiple of the same event handler using .off()

Question

I assign two event handlers:

$('#myElement').on('click', '.classA', doSomething);
$('#myElement').on('click', '.classB', doSomethingElse);

I want to remove both the handlers. I know I can do:

$('#myElement')
    .off('click', '.classA')
    .off('click', '.classB');

I thought it would be possible in one line, but both of these fail:

$('#myElement').off('click', '.classA, .classB');
$('#myElement').off('click', '.classA .classB');

Is there a way to do it in one command?

Answer 1

After looking at the source, you will see in the off :-

return this.each( function() {
    jQuery.event.remove( this, types, fn, selector );
}

Which means the selector needs to be exactly how it was created.

Therefore you need to use:-

$('#myElement').on('click', '.classA', function() { alert('A'); });
$('#myElement').on('click', '.classB', function() { alert('B'); });

$('#myElement').off('click', '.classA').off('click', '.classB');

$('#myElement').on('click', '.classA', function() { alert('A'); });
$('#myElement').on('click', '.classB', function() { alert('B'); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="myElement">
  <button class="classA">A</button>
  <button class="classB">B</button>
</div>