title: How to reset the bootstrap modal when it gets closed and open it fresh again?
body: <p>I have a list box in the bootstrap modal and a button.
  When the button is clicked a new button gets rendered inside a div in the modal.
  When I close the modal and reopen it, the last operation performed on the modal like the button rendered earlier is still present in the modal.</p>
  
  <p>How do reset the modal so that when the modal is opened again, the button is not present and user can again select the option from the list box and click on the button to render a new button and so on.</p>
  
  <pre><code>&lt;!-- Modal --&gt;
  &lt;div
    class="modal fade"
    id="myModal"
    tabindex="-1"
    role="dialog"
    aria-labelledby="myModalLabel"
    aria-hidden="true"
  &gt;
    &lt;div class="modal-dialog"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal"&gt;
            &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span
            &gt;&lt;span class="sr-only"&gt;Close&lt;/span&gt;
          &lt;/button&gt;
          &lt;h4 class="modal-title" id="myModalLabel"&gt;Select Language&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          &lt;button type="button" class="btn" data-dismiss="modal"&gt;Close&lt;/button&gt;
          &lt;button type="button" class="btn" id="submit_form"&gt;Submit&lt;/button&gt;
  
          &lt;div class="modal-body1"&gt;
            &lt;div id="placeholder-div1"&gt;&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="modal-footer"&gt;
          &lt;script&gt;
            $("#submit_form").on("click", function () {
              $(".modal-body1").html("&lt;h3&gt;test&lt;/h3&gt;");
            });
          &lt;/script&gt;
  
          &lt;script&gt;
            $(function () {
              $(".modal-footer").click(function () {
                $(".modal").modal("hide");
              });
            });
          &lt;/script&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>-- Update ---</p>
  
  <p>Why doesn't this work?</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
    $(function () {
      $("#myModal").on("hidden.bs.modal", function (e) {
        console.log("Modal hidden");
        $("#placeholder-div1").html("");
      });
    });
  &lt;/script&gt;
  </code></pre>