How to reset the bootstrap modal when it gets closed and open it fresh again?

Practical steps for modal reset

There are a few variations on how your modal might present itself. It might have forms to fill out, dynamic content loaded on demand, or interactive elements with their own event handlers. Let's break down how to reset each:

Clearing form/input fields

Do you love forms in modals? We do too! Here's how to reset them.

$('#myModal').on('hidden.bs.modal', function () {
    $(this).find('form').trigger('reset');  // Presto reset-o!
    $(this).find('form')[0].reset();        // Plan B: old school reset.
});


The form fields get a clean slate, ready to be (mis)filled again!

Resetting dynamically loaded content

Dynamic content is cool until you are left with remnants of the past. Here's how to make the past, past.

$('#myModal').on('hidden.bs.modal', function () {
    $(this).find('.modal-body').empty(); // "Empty your mind!" - Morpheus to Neo, and us to modal-body
    $(this).removeData('bs.modal');      // "You remember nothing!" - us to Bootstrap
});


Dealing with event handlers

Got custom event listeners on your modal elements? Don't let them mess up future modal interactions.

$('#myModal').on('hidden.bs.modal', function () {
    // This is not the 'click' you are looking for.
    $(this).find('.save-button').off('click');
});


This ensures your past won't haunt your future.

Cloning: go beyond resetting

Just like Doctor Who's resourcefulness with an extra regeneration, cloning a Bootstrap modal gives it an extra life each time it reopens.

Preparing for the regeneration

Before the first opening of your modal, save a snapshot.

var originalModal = $('#myModal').clone(); // Say cheese, modal! *clicks*


Regenerate from the snapshot

When the modal closes, restore it from the snapshot.

$('#myModal').on('hidden.bs.modal', function () {
    $(this).replaceWith(originalModal.clone()); // The Phoenix rises!
});


Note: Clones come with their initial event bindings intact. So, you get a fresh modal each time that's also fully functional!

Optimizing for performance and compatibility

While trying these reset methods, remember to keep an eye on efficiency and verify across Bootstrap versions.

Optimizing with .empty()

$('#myModal').on('hidden.bs.modal', function () {
    $(this).find('.modal-body').empty(); // Vacuum cleaner for your modal content
});


Staying compatible

Remember to validate your implementation across different versions of Bootstrap. Your code should stay version-proof. Check the Bootstrap documentation for any adjustments needed per version.