Bootstrap Modal and jQuery Event Handlers: Does data-bs-dismiss='modal' destroy the instance or just hide it?

Short answer

data-bs-dismiss="modal" only hides the modal. It calls the modal's hide() method, which removes the backdrop and Bootstrap's own backdrop listeners, but the Modal instance, its config, and its internal listeners stay alive on the .modal element. Nothing is destroyed, and any jQuery handlers you attached to the modal container or backdrop are not cleared automatically.

What actually happens on dismiss

• The dismiss attribute is purely declarative sugar for hide(). There is no option to make it dispose.
• On hide, Bootstrap removes the backdrop element and detaches the listeners it registered on that backdrop. That's the extent of the cleanup.
• The instance remains reachable: bootstrap.Modal.getInstance(el) still returns it after the modal is hidden.
• Your own $(el).on(...) bindings on the modal element survive. Delegated handlers on document or window are completely unaffected by anything the modal does.

Is this a leak in an SPA?

It depends on your pattern, and this is the distinction that matters:

• Reused modal markup (one modal element, shown repeatedly with different content): keeping the instance alive is correct and intended. Do not dispose. Just make sure you bind your jQuery handlers once (or use delegated handlers), not on every open — rebinding inside show.bs.modal without a matching .off() is the classic duplicate-handler bug.
• Dynamically created modals (fresh markup injected per open, common in SPA frameworks): if you hide and then remove the DOM element without disposing, the instance and its listeners are retained. Over many open/close cycles this accumulates Modal objects and any jQuery closures you bound — a genuine leak.

Recommended cleanup for the dynamic case

Dispose explicitly after the hide animation completes, and unbind your own handlers in the same place:

const el = document.getElementById('myModal');
const instance = bootstrap.Modal.getOrCreateInstance(el);

el.addEventListener('hidden.bs.modal', () => {
  $(el).off();            // remove your jQuery handlers on the modal
  instance.dispose();     // remove Bootstrap listeners + release instance
  el.remove();            // if the markup was injected dynamically
});

Guard against double-dispose (if (bootstrap.Modal.getInstance(el))) and never dispose mid-animation or on a modal you intend to reuse.

How to verify

1. After dismissing via the attribute, run bootstrap.Modal.getInstance(document.querySelector('.modal')) in devtools — it returns the instance, confirming hide ≠ destroy.
2. Call dispose() and re-check — it should return null.
3. For leak confirmation, take heap snapshots before and after repeated open/close cycles without dispose; retained Modal objects and jQuery handler closures will show up in the delta.

Caveats

This describes Bootstrap 5.3.x behavior; the backdrop-cleanup details have shifted across 5.x patch releases, so verify against your exact version with the devtools check above. If your jQuery handlers are all delegated to document with a selector, they never attach to the modal at all — in that case the only cleanup question is the Bootstrap instance itself.