jQuery Callbacks empty() Method

What You’ll Learn

The empty() method removes every handler from a jQuery Callbacks list in one step. The list stays active — you can add() and fire() again afterward. This tutorial covers syntax, five examples, and how empty() differs from remove() and disable().

Introduction

Callback lists grow as features subscribe to events — click handlers, AJAX hooks, plugin extensions. Over time you may need to wipe every subscriber without destroying the list itself. That is what empty() does: one call, zero handlers left.

Unlike disable(), which permanently turns firing off, empty() only clears the queue. You can register fresh handlers and continue using the same Callbacks object — ideal for resettable event buses and multi-step workflows.

Understanding the empty() Method

callbacks.empty() takes no arguments and removes all functions currently stored in the list. It also clears internal firing memory associated with those handlers, so the next fire() starts from a clean slate.

After empty(), calling fire() does nothing until you add() at least one new handler. The list is not disabled — disabled() remains false unless you previously called disable().

📝 Syntax

General form of callbacks.empty:

callbacks.empty()

Parameters

• None.

Return value

• Returns the same Callbacks object for method chaining.

Basic pattern

const callbackList = $.Callbacks();



callbackList.add(function () { console.log("Callback 1"); });

callbackList.add(function () { console.log("Callback 2"); });



callbackList.empty();



callbackList.fire(); // no output — list is empty

Examples Gallery

Each example demonstrates clearing handlers and what happens on the next fire().

const callbackList = $.Callbacks();



callbackList.add(function () { console.log("Callback 1"); });

callbackList.add(function () { console.log("Callback 2"); });



callbackList.empty();

callbackList.fire(); // no output

(no console output)

const callbacks = $.Callbacks();



callbacks.add(function () { console.log("Old handler"); });

callbacks.empty();



callbacks.add(function () { console.log("New handler"); });

callbacks.fire();

// → New handler

New handler

const callbacks = $.Callbacks();



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

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



callbacks.add(loggerA, loggerB);

callbacks.remove(loggerA);

callbacks.fire();

// → B



callbacks.empty();

callbacks.fire(); // no output

B

const StepBus = (function () {

  const onEnter = $.Callbacks();



  return {

    onEnter: onEnter,

    enterStep: function (name) {

      onEnter.fire(name);

    },

    reset: function () {

      onEnter.empty();

      console.log("Bus reset for next step");

    }

  };

})();



StepBus.onEnter.add(function (s) { console.log("Enter:", s); });

StepBus.enterStep("billing");  // → Enter: billing

StepBus.reset();

StepBus.enterStep("review");   // no output — no handlers

Enter: billing

Bus reset for next step

const callbacks = $.Callbacks();



callbacks

  .add(function () { console.log("v1"); })

  .fire(); // → v1



callbacks

  .empty()

  .add(function () { console.log("v2"); })

  .fire(); // → v2

v1

v2

🚀 Use Cases

• Event handler reset — clear all listeners before rebinding on DOM refresh.
• Wizard / multi-step UI — drop step-specific hooks when advancing.
• Test isolation — empty shared Callbacks fixtures between test cases.
• Memory hygiene — release handler references on long-lived SPAs without destroying the bus object.
• Handler replacement — swap entire callback sets via empty().add(...).

📝 Notes

• empty() does not call disable() — the list can still fire after new add() calls.
• On a list already disable()d, empty() does not re-enable firing.
• If the list is lock()ed, mutating methods including empty() may be restricted — see the lock() tutorial.
• Prefer remove(fn) when only one subscriber leaves.
• After empty(), has(fn) returns false for all previous handlers.

💡 Best Practices