JSFiddle - React, Tailwind, and code Playground

HTML

<h2>.off(namespace, namespace)</h2>
<p>
    <button class="click-one">click me</button>
    <button class="click-two">click me</button>
    <button class="click-clear">remove handlers</button>
</p>
<p>Press [click me], then [remove handlers], then [click me] again. Notice that event of .namespace2 was not removed.</p>


<h2>.off(namespace, event-name)</h2>
<p>
    <button class="md-one">click me</button>
    <button class="md-two">click me</button>
    <button class="md-clear">remove handlers</button>
</p>
<p>Press [click me], then [remove handlers], then [click me] again. Notice that mousedown-event was not removed.</p>

JavaScript

$(document)
    .on('click.namespace1', '.click-one', function(e){ alert('clicked one!'); })
    .on('click.namespace2', '.click-two', function(e){ alert('clicked two!'); })
    .on('click', '.click-clear', function(e){ 
        $(document).off('click.namespace1 click.namespace2');
    });

$(document)
    .on('click.namespace3', '.md-one', function(e){ alert('clicked three!'); })
    .on('mousedown.namespace4', '.md-two', function(e){ alert('clicked four!'); })
    .on('click', '.md-clear', function(e){
        $(document).off('click.namespace3 mousedown');
    });