jQuery Callbacks remove() Method

What You’ll Learn

The remove() method unregisters specific function references from a jQuery Callbacks list — the counterpart to add(). This tutorial covers syntax, five examples, comparisons with empty(), and unsubscribe patterns for event buses and plugins.

Introduction

You use add() to subscribe handlers to a Callbacks list. When a component unmounts, a user logs out, or a one-time listener is no longer needed, those handlers should come off the list — otherwise the next fire() still invokes them.

remove() is how you unsubscribe. Pass the same function reference you used with add(), and jQuery drops it from the queue.

Understanding the remove() Method

callbacks.remove(callback [, callback]) removes one or more handlers from the list by reference. Removed functions no longer run on subsequent fire() or fireWith() calls. The method returns the same Callbacks object for chaining.

It does not clear the entire list when called with no arguments. The old reference incorrectly stated that omitting the callback removes all handlers — use empty() for that. Matching is by reference, same as has().

📝 Syntax

General form of callbacks.remove:

callbacks.remove( callback [, callback ] )

Parameters

• callback — One or more function references to remove from the list. Each must match a handler previously added with add().

Return value

• Returns the same Callbacks object (supports chaining).

Basic pattern

const callbacks = $.Callbacks();



function onUpdate() { console.log("Updated"); }



callbacks.add(onUpdate);

callbacks.fire();   // → Updated

callbacks.remove(onUpdate);

callbacks.fire();   // nothing runs

Examples Gallery

Each example shows a different way to use remove() in real Callbacks workflows.

const callbacks = $.Callbacks();



function foo() { console.log("Foo"); }

function bar() { console.log("Bar"); }



callbacks.add(foo);

callbacks.add(bar);

callbacks.fire();       // Foo, Bar

callbacks.remove(foo);

callbacks.fire();       // Bar only

Foo

Bar

Bar

const callbacks = $.Callbacks();



const a = function () { console.log("A"); };

const b = function () { console.log("B"); };

const c = function () { console.log("C"); };



callbacks.add(a, b, c);

callbacks.remove(a, b);

callbacks.fire(); // → C

C

const callbacks = $.Callbacks();



const loggerA = function () { console.log("Logger A"); };

const loggerB = function () { console.log("Logger B"); };



callbacks.add(loggerA, loggerB);

callbacks.remove(loggerA);

callbacks.fire(); // → Logger B



callbacks.empty();

callbacks.fire(); // nothing

Logger B

const EventBus = (function () {

  const listeners = $.Callbacks();



  return {

    on: function (fn) { listeners.add(fn); },

    off: function (fn) {

      if (listeners.has(fn)) {

        listeners.remove(fn);

        console.log("Unsubscribed");

      }

    },

    emit: function (data) { listeners.fire(data); }

  };

})();



const handler = function (d) { console.log("Got:", d); };

EventBus.on(handler);

EventBus.emit("hello");  // → Got: hello

EventBus.off(handler);

EventBus.emit("again");  // nothing

Got: hello

Unsubscribed

const callbacks = $.Callbacks();

const handler = function () { console.log("Still registered"); };



callbacks.add(handler);

callbacks.lock();

callbacks.remove(handler); // ignored

callbacks.fire();          // → Still registered

Still registered

🚀 Use Cases

• Event unsubscription — off(fn) wrapping remove(fn).
• Component teardown — drop handlers when a widget is destroyed.
• One-time listeners — remove self inside the handler after first fire.
• Duplicate cleanup — remove extra copies of the same reference.
• Plugin APIs — let users detach custom hooks they no longer need.

📝 Notes

• Pass the exact function reference — remove() does not match by name or source code.
• Use empty() to clear all handlers; do not omit args from remove() for that.
• After lock(), remove() is a no-op.
• Removing a handler that is not on the list is safe — jQuery ignores it silently.
• has(fn) returns false immediately after a successful remove(fn).

💡 Best Practices