jQuery .off() Method

What Is .off()?

.off(events [, selector] [, handler]) removes handlers attached with .on() (since 1.7). Filter by event type, namespace, delegation selector, and/or function reference.

$("#btn").on("click", fn);
$("#btn").off("click", fn);          // remove that handler

$("body").on("click", "#theone", flash);
$("body").off("click", "#theone", flash); // same selector required

$("form").off(".validator");         // all handlers in that namespace
$("p").off();                        // remove everything on p
$("p").off("click", "**");           // all delegated clicks only

How to Use .off()

Match the same filters you used when calling .on().

1. Attach with .on() (direct or delegated).
2. Decide what to remove: all, one event type, a namespace, a selector, and/or a function.
3. Call .off() with those same filters on the same element(s).
4. For delegated handlers, pass the exact original selector string.
5. In shared code, prefer namespaces over bare .off("click").

Pseudocode

handlers were attached with .on(...)

call .off(optional EVENTS, optional SELECTOR, optional HANDLER):

    if no args:
        remove all handlers on these elements
    else:
        keep only handlers that match EVERY filter you passed

delegated note:
    SELECTOR must equal the original .on() selector
    "**" means “any delegated selector” for that event

Cheat Sheet

Keep these removal patterns handy.

Live Preview

Bind a delegated click, fire it, then remove it with .off().

Ready — Run “bind”, then click Target.

jQuery Examples

Short, copy-ready snippets. Pair every .on() with a matching .off() when cleaning up.

function flash() {
  $("#out").text("Clicked!");
}

$("#bind").on("click", function () {
  $("body").on("click", "#theone", flash);
  $("#theone").text("Can Click!");
});

$("#unbind").on("click", function () {
  $("body").off("click", "#theone", flash);
  $("#theone").text("Does nothing...");
});

Add Click → target becomes active
Remove Click → target stops responding

$("p").on("click", fn1);
$("p").on("mouseover", fn2);

$("p").off(); // both gone

Before .off() → click and mouseover work
After $("p").off() → neither works

var foo = function () {
  $("#out").text("foo ran");
};

$("body").on("click", "p", foo);
$("body").off("click", "p", foo);

Before off → foo runs on paragraph click
After off → foo does not run

$("form").on("click.validator", "button", validate);
$("form").on("keypress.validator", "input", validate);

$("form").off(".validator"); // both removed

.validator handlers removed
Other namespaces on the form stay intact

$("#list").on("click", "li", onItem); // delegated
$("#list").on("click", onList);       // direct

$("#list").off("click", "**"); // removes onItem only

Delegated li clicks stop
Direct #list click can still fire

Performance Notes

Removing a handler is cheap. The expensive mistake is never removing them when elements or widgets are destroyed.

Key Takeaways