我正在使用jquery'remove'从DOM中删除一个元素。问题是，它没有从内存中删除。我正在尝试'purge'和'deleteData'的所有变体从DOM和内存中删除，但还是没有运气。
下面的调试脚本突出了该问题。它将总计之前/之后发布到控制台以检查内存删除。
单击[x]后，该行将被删除，但是无论我尝试执行什么操作，数据都将保留在内存中。
评论了一些我尝试过的...
// discardElement(current_row) ;
// jQuery.removeData(current_row) ;
// $.removeData(current_row) ;
// current_row.removeData();
//purge(current_row) ;
// $.purge(current_row) ;
// $.removeData(current_row) ;
这些解决方案也没有运气：
How to clear DOM elements created with jQuery from memory?
Removing SVG from dom and memory
我已经在这里呆了几个小时了。我究竟做错了什么？
my code in jsfiddle
HTML代码：
<div data-role="page">
<!-- /header -->
<div data-role="content">
<!-- entry points table -->
<section id="entry_points_section">
<div class="section_titles">Enter market entry points:</div>
<div class="input_fields_wrap">
<table class="responsive" id="input_entries_table">
<tbody>
<tr>
<th scope="col" id="entry_price_column">Entry price</th>
<th scope="col">Percent</th>
<th scope="col">Order amount</th>
<th scope="col">Capital value</th>
<th scope="col">Breakeven</th>
<th scope="col"></th>
</tr>
<tr>
<td width="17%" style="min-width:3em"><input type="number" class="entryprice_class"
name="entryprice" size="5"
min="0" placeholder="0" value="500"></td>
<td style="min-width:2em"><input type="range" name="slider-fill_1" class="entry_percent"
id="entry_percent_1" value="0" placeholder="0%" min="0"
max="100"
data-highlight="true"/></td>
<td width="17%" style="min-width:3em"><input type="text" class="order_amount"
name="order_amount_name" size="5" min="0"
placeholder="0" length="10px" disabled></td>
<td width="17%" style="min-width:3em"><input type="text" class="capital_value"
name="capital_value" size="5" min="0"
placeholder="0" disabled></td>
<td width="17%" style="min-width:3em"><input type="text" class="breakeven" name="breakeven"
size="5" min="0" placeholder="0" disabled></td>
<td width="28px" style="display:none">
<button data-role="button" data-icon="delete" data-iconpos="notext" data-inline="true">
</button>
</td>
</tr>
<tr>
<td width="17%" style="min-width:3em"><input type="number" class="entryprice_class"
size="5"
min="0" placeholder="400" value="400"></td>
<td style="min-width:2em"><input type="range" name="slider-fill" class="entry_percent"
value="0" placeholder="0%" min="0"
max="100"
data-highlight="true"/></td>
<td width="17%" style="min-width:3em"><input type="text" class="order_amount"
name="order_amount" size="5" min="0"
placeholder="0" length="10px" disabled></td>
<td width="17%" style="min-width:3em"><input type="text" class="capital_value"
name="capital_value" size="5" min="0"
placeholder="0" disabled></td>
<td width="17%" style="min-width:3em"><input type="text" class="breakeven" name="breakeven"
size="5" min="0" placeholder="0" disabled></td>
<td width="28px"><a href="#" class="remove_field">
<button data-role="button" data-icon="delete" data-iconpos="notext" data-inline="true">
</button>
</a></td>
</tr>
<tr>
<td width="17%" style="min-width:3em"><input type="number" class="entryprice_class"
size="5"
min="0" placeholder="0" value="300"></td>
<td style="min-width:2em"><input type="range" name="slider-fill" class="entry_percent"
value="0" placeholder="0%" min="0"
max="100"
data-highlight="true"/></td>
<td width="17%" style="min-width:3em"><input type="text" class="order_amount"
name="order_amount" size="5" min="0"
placeholder="0" length="10px" disabled></td>
<td width="17%" style="min-width:3em"><input type="text" class="capital_value"
name="capital_value" size="5" min="0"
placeholder="0" disabled></td>
<td width="17%" style="min-width:3em"><input type="text" class="breakeven" name="breakeven"
size="5" min="0" placeholder="0" disabled></td>
<td width="28px"><a href="#" class="remove_field">
<button data-role="button" data-icon="delete" data-iconpos="notext" data-inline="true">
</button>
</a></td>
</tr>
<tr>
<td width="17%" style="min-width:3em"><input type="number" class="entryprice_class"
name="entryprice" size="5"
min="0" placeholder="0" value="200"></td>
<td style="min-width:2em"><input type="range" name="slider-fill" class="entry_percent"
value="0" placeholder="0%" min="0"
max="100"
data-highlight="true"/></td>
<td width="17%" style="min-width:3em"><input type="text" class="order_amount"
name="order_amount" size="5" min="0"
placeholder="0" length="10px" disabled></td>
<td width="17%" style="min-width:3em"><input type="text" class="capital_value"
name="capital_value" size="5" min="0"
placeholder="0" disabled></td>
<td width="17%" style="min-width:3em"><input type="text" class="breakeven" name="breakeven"
size="5" min="0" placeholder="0" disabled></td>
<td width="28px"><a href="#" class="remove_field">
<button data-role="button" data-icon="delete" data-iconpos="notext" data-inline="true">
</button>
</a></td>
</tr>
<tr>
<td width="17%" style="min-width:3em"><input type="number" class="entryprice_class"
name="entryprice" size="5"
min="0" placeholder="0" value="100"></td>
<td style="min-width:2em"><input type="range" name="slider-fill" class="entry_percent"
value="0" placeholder="0%" min="0"
max="100"
data-highlight="true"/></td>
<td width="17%" style="min-width:3em"><input type="text" class="order_amount"
name="order_amount" size="5" min="0"
placeholder="0" length="10px" disabled></td>
<td width="17%" style="min-width:3em"><input type="text" class="capital_value"
name="capital_value" size="5" min="0"
placeholder="0" disabled></td>
<td width="17%" style="min-width:3em"><input type="text" class="breakeven" name="breakeven"
size="5" min="0" placeholder="0" disabled></td>
<td width="28px"><a href="#" class="remove_field">
<button data-role="button" data-icon="delete" data-iconpos="notext" data-inline="true">
</button>
</a></td>
</tr>
</tbody>
</table>
</div>
</section>
</div>
JavaScript代码：
$(document).ready(function () {
guiController(); // load GUI controller
views(); // load views
// ******************************** GUI CONTROLLER ******************************
function guiController() {
entriesAddDeleteController(); // watches for add or delete entry events and triggers views functions to add/delete dom
// ================ entries add/delete =================
function entriesAddDeleteController() {
// delete entry button clicked
var wrapper = $('.input_fields_wrap'); //Fields wrapper
$(wrapper).on("click", ".remove_field", function (e) { //user click on remove text
e.preventDefault();
var current_row = $(this);
deleteEntry(e, current_row);
// discardElement(current_row) ;
// jQuery.removeData(current_row) ;
// $.removeData(current_row) ;
// current_row.removeData();
//purge(current_row) ;
// $.purge(current_row) ;
// $.removeData(current_row) ;
// for debugging, sum totals
entries_prices = $('.entryprice_class');
var sum_of_all_entries = 0;
// get total sum of entry prices (to calculate entries)
entries_prices.each(function () {
entry_price = parseFloat(this.value);
sum_of_all_entries = sum_of_all_entries + entry_price;
});
alert("Totals: " + sum_of_all_entries);
console.log('Total: ' + sum_of_all_entries);
});
}
}
// ************************************ VIEWS ***********************************
function views() {
// ================ delete entry ================
deleteEntry = function deleteEntry(e, current_row) {
e.preventDefault();
current_row.parent().parent().fadeOut(400, 0, function () {
current_row.remove();
});
};
}
});
最佳答案
有两件事要注意。
正如epascarello所说，该操作是异步的，因此您要在删除元素之前运行检查。current_row变量是您在调用.remove()时会徘徊的东西，因此我根本不会设置它。
这样效果更好：
$(wrapper).on("click", ".remove_field", function (e) { //user click on remove text
e.preventDefault();
$(this).parent().parent().fadeOut(400, 0, function () {
// don't use current_row inside here
$(this).remove();
// do everything in the callback
// for debugging, sum totals
entries_prices = $('.entryprice_class');
var sum_of_all_entries = 0;
// get total sum of entry prices (to calculate entries)
entries_prices.each(function () {
entry_price = parseFloat(this.value);
sum_of_all_entries = sum_of_all_entries + entry_price;
});
alert("Totals: " + sum_of_all_entries);
console.log('Total: ' + sum_of_all_entries);
});
});
Fiddle
如果您在删除
current_row之前做了很多事情，可以设置变量，但是必须确保将其设置为null或在fadeOut回调之前超出范围（即click函数退出）。运行以使其正常工作：$(wrapper).on("click", ".remove_field", function (e) { //user click on remove text
e.preventDefault();
var current_row = $(this);
current_row.parent().parent().fadeOut(400, 0, function () {
// you still can't use current_row here
$(this).remove();
// do everything in the callback
// for debugging, sum totals
entries_prices = $('.entryprice_class');
var sum_of_all_entries = 0;
// get total sum of entry prices (to calculate entries)
entries_prices.each(function () {
entry_price = parseFloat(this.value);
sum_of_all_entries = sum_of_all_entries + entry_price;
});
alert("Totals: " + sum_of_all_entries);
console.log('Total: ' + sum_of_all_entries);
});
// clear current_row
current_row = null;
});
Fiddle