[英]Removing HTML elements from the DOM using jQuery
I'm using an api to get values to append to the DOM, I have them append to the <tr>
tag. 我正在使用api来获取要附加到DOM的值,我将它们附加到
<tr>
标记。 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. 我的问题是每次关闭模态并重新打开表格,值仍然存在,以及手风琴上的“userCurrency”。 How can I remove these elements when I close the modal?
关闭模态时如何删除这些元素?
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();
});
I checked the documents of leanModal.js ; 我检查了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. 因此,您需要为此做一个解决方法,将
.remove()
移动到click事件上。
$(".btn").on("click", function(){
if($(".hello").length > 0) $(".hello").remove();
// rest of click handler
});
this is the fastest way to clear all rows from the table 这是清除表中所有行的最快方法
$('.btnClose').on('click', function () {
$("#theTable").empty();
})
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();
.....
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.