Last Updated: October 04, 2020
·
134.2K
· jensanity5000

Clear Bootstrap Modal content after close.

Ran across this problem myself when trying to use a remote modal for dynamic content. when selecting a different link the old content would always be displayed.

Very simple fix just add this quick jQuery snippet to your html/jade/or whatever file in a script tag outside the body tag, but inside head tag.

So for example in Jade:

doctype 5
html
  head
    script
      $('body').on('hidden.bs.modal', '.modal', function () {
        $(this).removeData('bs.modal');
      });
  body
    ...
    ...

This tells Bootstrap to clear everything on the close of the modal window, so you won't get cached content.

Of course you need to include jQuery JS file, Bootstrap JS File, and Bootstrap CSS. Not shown here for simplicity.

This is for Bootstrap 3.

Related protips:

Change the Bootstrap NavBar Breakpoint

5 Responses
Add your response

nice and simple!

over 1 year ago ·

Thanks. I was getting a lot of bubbling events that were causing the modal to close multiple times and build on itself. This (using 'body' instead of '#element' and .removeData instead of .data('modal', null) as SE suggested) fixed it!

over 1 year ago ·

Can you update the code for Bootstrap 2.X ?

over 1 year ago ·

@raul1991 I think for Bootstrap 2 this should work:

$('body').on('hidden', function () {
$(this).removeData('modal');
});

over 1 year ago ·

thanks you. it good way to solve problem.

over 1 year ago ·