I have a page where I want to close a bootstrap 3 modal and then remove the modal itself from the DOM.

So, I've tried to do it this way:

let modal = $('#myModal');
modal.modal('hide');
modal.remove();

The problem is that this solution closes the modal popup itself but leaves the darkened semi-transparent background over the page. I suspect this is because the modal gets removed from the page before the closing animation pletes.

I know I can just set an timer to wait a bit and ensure that the modal has closed before removing it from the DOM, but what I wanted to know is: is there a more "proper" way that doesn't rely on an arbitrary timer?

I have a page where I want to close a bootstrap 3 modal and then remove the modal itself from the DOM.

So, I've tried to do it this way:

let modal = $('#myModal');
modal.modal('hide');
modal.remove();

The problem is that this solution closes the modal popup itself but leaves the darkened semi-transparent background over the page. I suspect this is because the modal gets removed from the page before the closing animation pletes.

I know I can just set an timer to wait a bit and ensure that the modal has closed before removing it from the DOM, but what I wanted to know is: is there a more "proper" way that doesn't rely on an arbitrary timer?

• javascript
• jquery
• twitter-bootstrap-3
• bootstrap-modal

1 Answer 1

You can try this code.

Bootstrap 3

$('#myModal').on('hidden.bs.modal', function () {
    $('#myModal').remove();
});

Bootstrap 2.3.2

$('#myModal').on('hidden', function () {
    $('#myModal').remove();
});

The event will be triggered after modal close.