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

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 = "";