Question

我正在使用bootstrap

我想隐藏模态中的内容。

我尝试了以下内容：

$(".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 -->

但是，文本仍在模态窗口中。

有什么建议我做错了吗？

Answer 1

您可能使用了错误的选择器。如果您只想清除textarea的内容，请尝试定位textarea本身，而不是.modal-body。

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

或者

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

已编辑：textareas不回复.html()，而是回复.val()。

Answer 2

将模态体html设置为空：

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

或者，如果你想彻底删除模态元素，可以使用

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

隐藏时从模态中删除内容

2 个答案: