I'm using an api to get values to append to the DOM, I have them append to the <tr>
tag. my issue is every single time I close the modal and reopen it the table and the values are still there, as well as the "userCurrency" on the accordion. How can I remove these elements when I close the modal?
我正在使用一个api来获得附加到DOM的值,我将它们附加到标记中。我的问题是每次我关闭模态并重新打开它,表和值仍然在那里,以及手风琴上的“userCurrency”。当我关闭模式时如何删除这些元素?
This is my html
这是我的html
<!-- currency select -->
<label class="">
<span class="">Pick a currency</span>
<select id="userCurrency" style="display: inline; width: auto; vertical-align: inherit;">
<option value="USD">USD</option>
<option value="EUR">EUR</option>
<option>JPY</option>
<option>GBP</option>
<option>CHF</option>
<option>CAD</option>
<option>AUD</option>
<option>MXN</option>
<option>CNY</option>
<option>NZD</option>
<option>SEK</option>
<option>RUB</option>
<option>HKD</option>
<option>NOK</option>
<option>SGD</option>
<option>TRY</option>
<option>KRW</option>
<option>ZAR</option>
<option>BRL</option>
<option>INR</option>
</select>
</label>
<!-- select end -->
<a id="btn" class="waves-effect waves-light btn modal-trigger" href="#modal1">Bitcoin Information</a>
<a id="btn" class="waves-effect waves-light btn modal-trigger" href="#modal2">Help</a>
</div>
</div>
</div>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<ul class="collapsible" data-collapsible="accordion">
<li>
<div id="currencylabel" class="collapsible-header"></div>
<div id="cbody" class="collapsible-body">
<table id="theTable">
<thead>
<tr>
<td>Volume</td>
<td>Latest</td>
<td>Bid</td>
<td>High</td>
</tr>
</thead>
<tbody></tbody>
</table>
</ul>
</div>
</div>
</div>
this is my javascript
这是我的javascript
$(".btn").on("click", function(){
var userCurrency = $('#userCurrency option:selected').text();
$("#currencylabel").append(userCurrency);
$.ajax({
type: "GET",
url: bitcoinApiUrl,
dataType: "json",
success: function(currency) {
// loop through currency
for (var i = 0; i < currency.length; i++)
{
if(currency[i].currency == userCurrency)
{
var $tr = $("<tr class='hello' />");
$tr.append( $("<td />").text(currency[i].volume) );
$tr.append( $("<td />").text(currency[i].latest_trade) );
$tr.append( $("<td />").text(currency[i].bid) );
$tr.append( $("<td />").text(currency[i].high) );
$("#theTable tbody").append($tr);
}
}
}
});
});
});
$('#modal1').on('hidden', function () {
$(".hello").remove();
})
modal code
模态代码
$(document).ready(function(){
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal-trigger').leanModal();
});
3 个解决方案
#1
2
I checked the documents of leanModal.js; the plugin doesn't trigger such event to detect the modal has been hidden out. So, you need to do a workaround for such, move the .remove()
to on click event.
我检查了leanmod .js文件;这个插件不会触发这样的事件来检测隐藏的模态。因此,您需要为此做一个变通,将.remove()移动到on click事件。
$(".btn").on("click", function(){
if($(".hello").length > 0) $(".hello").remove();
// rest of click handler
});
#2
2
this is the fastest way to clear all rows from the table
这是清除表中所有行的最快方式
$('.btnClose').on('click', function () {
$("#theTable").empty();
})
#3
0
Try this coding
试试这个编码
$(".modal_close").click(function(){
$(".hello").remove();
});
Otherwise click btn remove the content, then add once again
否则单击btn删除内容,然后再次添加
$(".btn").on("click", function(){
$(".hello").remove();
.....
}
#1
2
I checked the documents of leanModal.js; the plugin doesn't trigger such event to detect the modal has been hidden out. So, you need to do a workaround for such, move the .remove()
to on click event.
我检查了leanmod .js文件;这个插件不会触发这样的事件来检测隐藏的模态。因此,您需要为此做一个变通,将.remove()移动到on click事件。
$(".btn").on("click", function(){
if($(".hello").length > 0) $(".hello").remove();
// rest of click handler
});
#2
2
this is the fastest way to clear all rows from the table
这是清除表中所有行的最快方式
$('.btnClose').on('click', function () {
$("#theTable").empty();
})
#3
0
Try this coding
试试这个编码
$(".modal_close").click(function(){
$(".hello").remove();
});
Otherwise click btn remove the content, then add once again
否则单击btn删除内容,然后再次添加
$(".btn").on("click", function(){
$(".hello").remove();
.....
}