CODEWITHSUNDEEP
javascriptjquery
Carol.Kar
Carol.Kar

Reputation: 5355

Remove content from modal when hidden

I am using bootstrap

I would like to remove the content from the modal when it gets hidden.

I tried the following:

$(".sn-reddit").on("hidden.bs.modal", () => {
  $(".modal-body").html("")
});
$(".sn-reddit").on("click", this.code.bind(this))

function code(e) {
  e.preventDefault()

  $(".socialnetworkcontent.form-control").append(
    "test"
  );

  $('#redditModal').modal('show');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.2.6/css/bootstrap-modal.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />

<a class="sn-reddit" href="#redditModal"><i class="fab fa-reddit-alien"></i>Test</a>

<!-- Modal -->
<div class="modal fade" id="redditModal" tabindex="-1" role="dialog" aria-labelledby="redditModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="redditModalLabel">Reddit</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
      </div>
      <div class="modal-body">
        <div class="">
          <textarea class="socialnetworkcontent form-control" style="min-width: 100%">teststeste</textarea>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <!-- <button type="button" class="btn btn-primary">Save changes</button> -->
      </div>
    </div>
  </div>
</div>
<!-- END -->

However, the text is still in the modal window.

Any suggestions what I am doing wrong?

Upvotes: 1

Views: 2532

Answers (2)

mdlanglais
mdlanglais

Reputation: 351

You may be using the wrong selector. If you just want to clear the contents of your textarea, try targeting the textarea itself instead of .modal-body.

$(".sn-reddit").on("hidden.bs.modal", () => {
  $('.form-control').val('')
});

Or

$(".sn-reddit").on("hidden.bs.modal", () => {
  $('.socialnetworkcontent').val('');
});

Edited: textareas don't respond to .html(), rather to .val().

Upvotes: 1

Srinivas GV
Srinivas GV

Reputation: 167

Set the modal body html to empty:

$(".modal-body").html("");

alternatively if you want to remove the modal element comepletely,you can use

$('#modalElement').on('hidden', function(){
    $(this).data('modal', null);
});

Upvotes: 2

Related Questions