如何清除和重置模态中的数据？

Question

当我关闭此模式并再次打开时，先前的信息以及新的信息都会保留。 我想清除模式中的所有信息，包括清除标题和正文中的信息。

预期的情况-https: //i.stack.imgur.com/Z42Rk.png这种情况-https://i.stack.imgur.com/TJpc8.png

码-

.html.erb文件

<div class="modalV3 fade" id="marketplacesModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="vertical-alignment-helper">
    <div class="modalV3-dialog vertical-align-center">
      <div class="modalV3-content">
        <div class="modalV3-header">
          <button type="button" class="close" data-dismiss="modalV3" aria-hidden="true"><i class="fa fa-times-circle"></i></button>
          <h2></h2>
        </div>
        <div class="modalV3-body">
          <small class="modal-notification"> </small>
        </div>
        <div class="modalV3-footer">
          <button class="btn" data-dismiss="modalV3" aria-hidden="true">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>

.js.erb文件

var asin_id = "<%= @asin.asin_number.to_s %>";
$('.viewMarketplaces').click(function () {
  $('#marketplacesModal').modal();
  $(".modalV3-header h2").html("Asin Number: " + asin_id);
//  $(".modalV3-body").clearData();
  var $modalBody = $(".modalV3-body");
  var marketplacesNames = ['US', 'CA', 'MX', 'UK', 'DE', 'FR', 'IT', 'ES', 'JP', 'CN', 'IN'];
  var marketplacesInDB = ['us_ald', 'ca_ald', 'mx_ald', 'uk_ald', 'de_ald', 'fr_ald', 'it_ald', 'es_ald', 'jp_ald', 'cn_ald', 'in_ald'];
  var table = document.createElement('TABLE');
  table.setAttribute('class', 'table table-striped table-bordered');
  var thead = document.createElement('THEAD');
  table.appendChild(thead);
  var th1 = document.createElement('TH');
  var th2 = document.createElement('TH');
  th1.appendChild(document.createTextNode("Marketplaces"));
  th2.appendChild(document.createTextNode("Launch Date"));
  thead.appendChild(th1);
  thead.appendChild(th2);
  var tbody = document.createElement('TBODY');
  table.appendChild(tbody);
  for (i=0; i< marketplacesNames.length; i++) {
    var tr = document.createElement('TR');
    tbody.appendChild(tr);
    var td1 = document.createElement('TD');
    var td2 = document.createElement('TD');
    td1.appendChild(document.createTextNode(marketplacesNames[i]));
    td2.appendChild(document.createTextNode(getLaunchDate(marketplacesInDB[i])));
    tr.appendChild(td1);
    tr.appendChild(td2);
  }
  $modalBody.append(table);
});

function getLaunchDate(n) {
  switch(n) {
    case "us_ald":
      value = "<%= @asin.us_ald.to_s %>";
      break;
    case "ca_ald":
      value = "<%= @asin.ca_ald.to_s %>";
      break;
    case "mx_ald":
      value = "<%= @asin.mx_ald.to_s %>";
      break;
    case "uk_ald":
      value = "<%= @asin.uk_ald.to_s %>";
      break;
    case "de_ald":
      value = "<%= @asin.de_ald.to_s %>";
      break;
    case "fr_ald":
      value = "<%= @asin.fr_ald.to_s %>";
      break;
    case "it_ald":
      value = "<%= @asin.it_ald.to_s %>";
      break;
    case "es_ald":
      value = "<%= @asin.es_ald.to_s %>";
      break;
    case "jp_ald":
      value = "<%= @asin.jp_ald.to_s %>";
      break;
    case "cn_ald":
      value = "<%= @asin.cn_ald.to_s %>";
      break;
    case "in_ald":
      value = "<%= @asin.in_ald.to_s %>";
      break;
  }
  return value;
}


$(".close, .btn").click(function(event) {
  if($('.modalV3').is(":visible")) {
    $('.modalV3').modal('hide');
    $('.modalV3-body').reset();
     $('#marketplacesModal').removeData();
    $('#marketplacesModal').reset();
  }
});

$('.modalV3').on('hidden.bs.modal', function () {
  $(this).find('input').val('');
  $(this).removeData();
});

$('#marketplacesModal').on('hidden', function () {
  $(this).find('input[type=text], input[type=password], input[type=number], input[type=email], textarea').val('');
  $(this).removeData()
});

$('#view_marketplaces').click(function () {
  $("#marketplacesModal").modal('show');
});

Answer 1

据我了解，jQuery函数reset更常用于重置<form> ，而不是<div> 。 我建议您在关闭模式时将模式的innerHTML设置为空字符串。 可以这样完成：

$('.modalV3-body').innerHTML = "";