title: How clear bootstrap modal on hide
body: <p>How to can you clear the bootstrap modal on dismiss/hide/close?</p>
  
  <p>I have the following Modal definition:</p>
  
  <pre><code>&lt;button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"&gt;
     Add New Comment
  &lt;/button&gt;
  </code></pre>
  
  <p><strong>Partial view which contains Modal</strong> </p>
  
  <pre><code>@Html.Partial("_CreateComment", Model)
  
  
   // Partial view which contains modal
  
   &lt;div class="modal fade" id="myModal" tabindex="-1" role="dialog"&gt;
      &lt;div class="modal-dialog" role="document"&gt;
        &lt;div class="modal-content"&gt;
        @using (Ajax.BeginForm("AddComment", "Blog", new AjaxOptions
              {
                  HttpMethod = "POST",
                  InsertionMode = InsertionMode.Replace,
                  UpdateTargetId = "comments",
                  OnSuccess = "$('#myModal').modal('hide');"
  
              }))
        {
          &lt;div class="modal-header"&gt;
                  &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
                      &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;h4 class="modal-title" id="myModalLabel"&gt;Add Comment&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
                  @Html.ValidationSummary(true)
                  @Html.HiddenFor(model =&gt; model.Blog.BlogID)
  
                  &lt;div class="form-group"&gt;
                      @Html.LabelFor(model =&gt; model.BlogComment.Comment)
                      @Html.TextAreaFor(model =&gt; model.BlogComment.Comment, 4, 104, new { @class = "form-control" })
                      @Html.ValidationMessageFor(model =&gt; model.BlogComment.Comment)
                  &lt;/div&gt;
  
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
              &lt;button type="button" class="btn btn-primary"&gt;Save changes&lt;/button&gt;
              &lt;button type="button" class="btn btn-primary" data-dismiss="modal"&gt;Close&lt;/button&gt;
          &lt;/div&gt;
        }
    &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And this is the javascript I am using to to clear the content:</p>
  
  <pre><code>$(function () {
      //clear modal cache, so that new content can be loaded
      $('body').on('hidden.bs.modal', '.modal', function () {
          $(this).removeData('bs.modal');
  
      });
  });
  </code></pre>
  
  <p>If I dismiss the modal after having entered some content or upon submission the content in the form doesn't clear?</p>