How to Reset the Bootstrap Modal When It Gets Closed and Open It Fresh Again

How to reset bootstrap modal to its original contents on close?

You can make use of the Bootstrap's Modal Events. You should be concerned about these two:

• hide.bs.modal This event is fired immediately when the hide instance method has been called.
• hidden.bs.modal This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).

So, you can do this:

$(function () {
  // Delegating to `document` just in case.
  $(document).on("hidden.bs.modal", "#myModalID", function () {
    $(this).find("#info").html(""); // Just clear the contents.
    $(this).find("#info").remove(); // Remove from DOM.
  });
});

Update

Seeing your code, you might need to use this:

$(function () {
  // Delegating to `document` just in case.
  $(document).on("hidden.bs.modal", "#myModalID", function () {
    $(this).find(".alert-danger").remove(); // Remove from DOM.
  });
});

Reset modal window when closed

You can use this on click of the close button of your popup

this function will scroll viewport of the popup div to top when clicked

jQuery(document).on('click','.vc_general',function(){
   var myDiv = document.getElementById('myNav');
   myDiv.scrollTop = 0;
});

".vc_general" is one of the class in your close button. You can add an extra class if you think it will affect the other functionality.

Bootstrap modal does not update content and reset form in adminlte

It's obvious that your modal content remain on each time you open and close your modal, You should clear your modal content with the following code:

$(document).on('hidden.bs.modal', '.modal', function (e) {    $(this).find(".modal-content").empty();    $(this).removeData('bs.modal');});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button href="/edit/id" data-target="#new" data-toggle="modal" type="button" class="btn btn-success">Edit</button><div class="modal fade" id="new" tabindex="-1" aria-hidden="true">    <div class="modal-dialog modal-lg">        <div class="modal-content">            <div class="modal-body">                <img src="/image/loading.gif" class="loading"/>                <span>Lodaing . . .</span>            </div>        </div>    </div></div>

$('#myModal').on('hidden.bs.modal', function () {
    $(this).find("input,textarea,select").val('').end();

});