user1996496 user1996496 - 1 month ago 7x
Javascript Question

How do I clear Bootstrap remote modal content on close?

I am launching a modal with remote content (on the same domain, however). The modal can be opened several times with different content on the same page, so when it closes, I need it to


I tried to do it like this:

function close_modal()



$('body').on('', '.modal', function () {


But for some reason the previous content is still visible for a split second when I open another modal target. I also checked the source code and the content loaded previously is still there. How do I fix this? Here is my markup:

$('a[rel=modal]').on('click', function(evt) {
var modal = $('#modal').modal();
.load($(this).attr('href'), function (responseText, textStatus) {
if ( textStatus === 'success' ||
textStatus === 'notmodified')

and the HTML:

<div id="modal" class="modal fade"
tabindex="-1" role="dialog" aria-labelledby="plan-info" aria-hidden="true">
<div class="modal-dialog modal-full-screen">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal" aria-hidden="true">
<span class="glyphicon glyphicon-remove-circle"></span>
<div class="modal-body">
<!-- /# content goes here -->


You should be able to use jQuery's empty method to remove all child nodes from .modal-body:

$('body').on('', '.modal', function () {