jQuery .off() Method

What You’ll Learn

The .off() method removes event handlers attached with .on(). This tutorial covers all official signatures, five worked examples from the jQuery API, delegated unbinding with the ** selector, namespace cleanup, comparison with legacy .die(), and best practices for plugin authors.

Introduction

Binding events is only half the story. When widgets are destroyed, routes change in a single-page app, or AJAX replaces DOM sections, you must remove handlers to prevent memory leaks and duplicate callbacks. jQuery unified unbinding in version 1.7 with .off(), the counterpart to .on().

Before 1.7, developers juggled three methods: .unbind() for direct handlers, .undelegate() for delegated ones, and .die() for legacy .live() handlers. Today, .off() handles all cases with one flexible API — filter by event type, delegation selector, handler function, or namespace.

Understanding .off()

.off() does not remove elements from the DOM — it detaches JavaScript functions from jQuery’s internal event registry. When you call .off("click", "#btn", fn), jQuery finds the handler that matches all provided filters and removes it. Omit filters to remove broader sets of handlers.

For delegated events, the selector argument must exactly match what you passed to .on(). If you bound on body with .on("click", "#theone", flash), unbind with .off("click", "#theone", flash) on the same element.

📝 Syntax

Four signatures from the official jQuery API (all since 1.7):

1. Filtered removal — .off( events [, selector ] [, handler ] )

.off( events [, selector ] [, handler ] )

• events — event type(s), optional namespace (e.g. "click", "click.myPlugin", ".myPlugin").
• selector — delegation selector that must match .on(); use "**" for all delegated handlers of a type.
• handler — specific function reference previously passed to .on().

2. Events map — .off( events [, selector ] )

$( "#form" ).off({
  "click.validator": validate,
  "keypress.validator": validate
} );

3. From event object — .off( event )

$( "#btn" ).on( "click", function( event ) {
  // Remove this handler after first click
  $( this ).off( event );
} );

4. Remove all — .off()

$( "p" ).off();  // every handler on matched p elements

Legacy migration template

// .unbind()  →  .off()
$( "#btn" ).unbind( "click", fn );
$( "#btn" ).off( "click", fn );

// .undelegate()  →  .off()
$( "#list" ).undelegate( "li", "click", fn );
$( "#list" ).off( "click", "li", fn );

// .die()  →  .off() on document
$( "p" ).die( "click", fn );
$( document ).off( "click", "p", fn );

Return value

• Returns the original jQuery object for chaining.
• When multiple filters are provided, all must match for a handler to be removed.

Examples Gallery

All five examples follow the official jQuery API documentation for .off(). Use the Try-it links to bind and unbind handlers interactively.

function flash() {
  $( "div" ).show().fadeOut( "slow" );
}

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

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

Click "Add Click" → #theone shows "Can Click!"

Click #theone → div flashes and fades

Click "Remove Click" → .off removes handler

#theone reverts to "Does nothing..."

$( "p" ).off();

Before: click and mouseenter handlers on each p

After $("p").off(): no handlers remain

Broadest cleanup — use during element teardown

$( "p" ).off( "click", "**" );

#box has direct click + delegated click on p

.off("click", "**") on #box → delegated p clicks gone

Direct click on #box background still works

var foo = function() {
  // Code to handle some kind of event
};

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

Two handlers on body → click p

.off("click", "p", handlerA) removes only handlerA

handlerB still runs — surgical removal

var validate = function() {
  // Code to validate form entries
};

$( "form" ).on( "click.validator", "button", validate );
$( "form" ).on( "keypress.validator", "input[type='text']", validate );

$( "form" ).off( ".validator" );

click.validator on button + keypress.validator on input

.off(".validator") removes BOTH

Other handlers without .validator namespace untouched

🚀 Common Use Cases

• Widget teardown — $("#widget").off(".myWidget") when removing a UI component.
• Toggle binding — official bind/unbind button pattern from Example 1.
• SPA route changes — $(document).off("click.myRoute", ".nav-link") before attaching new route handlers.
• One-time handlers — $(this).off(event) inside the handler after first run.
• Plugin isolation — namespace all bindings so .off() never removes foreign handlers.
• Migrating from .die() — replace $("p").die("click") with $(document).off("click", "p").

📝 Notes

• .off() was added in jQuery 1.7 as the unified replacement for .unbind(), .undelegate(), and (conceptually) .die().
• Calling .off("click") removes both direct and delegated click handlers unless you use "**" for delegated-only removal.
• Proxied handlers ($.proxy()) share one internal id — prefer namespaces when unbinding proxied functions.
• Minimum requirement: provide either an event name or a namespace (e.g. ".myPlugin" alone is valid).
• .off(event) removes the specific handler that is currently executing — useful for one-shot handlers.
• Legacy: $(document).off("click") removes all document-level delegated clicks, including those that replaced .live().

💡 Best Practices