How to Remove DOM Element From DOM and From Memory?
Question
I'm using the jquery 'remove' to delete an element from the DOM. The problem is, it is not deleting from memory. I'm trying all variations of 'purge', and 'deleteData' to delete from the DOM and memory but still no luck.
The debugging script below highlights the problem. It posts to the console the before/after totals to check for memory deletion.
When the [x] is clicked the row is deleted, but no matter what I try the data stays in memory.
Commented out are some of what I've tried...
// discardElement(current_row) ;
// jQuery.removeData(current_row) ;
// $.removeData(current_row) ;
// current_row.removeData();
//purge(current_row) ;
// $.purge(current_row) ;
// $.removeData(current_row) ;
No luck with these solutions either: How to clear DOM elements created with jQuery from memory?
Removing SVG from dom and memory
I've been at this for a few hours now. What am I doing wrong?
HTML code :
<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 code:
$(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();
});
};
}
});
4 answers
solution1
1 2014-12-01 13:42:11
deleteEntry = function deleteEntry(e, current_row) {
e.preventDefault();
current_row.parent().parent().fadeOut(400, 0, function () {
current_row.remove();
});
};
The problem is the fact that fadeOut is asynchronous. You are NOT removing the element until the fade is complete. That means when you do your calculation, the element is still there.
What you can do is add a class "deleted" to the element and in the selector when you add to ignore those.
deleteEntry = function deleteEntry(e, current_row) {
//e.preventDefault(); <-- makes no sense
current_row.find('.entryprice_class').addClass("deleted");
current_row.parent().parent().fadeOut(400, 0, function () {
current_row.remove();
});
};
and when you find the elements
var entries_prices = $('.entryprice_class').not(".deleted");
solution2
1 ACCPTED 2014-12-01 13:50:20
There are 2 things to note.
As epascarello says, the action is asynchronous, so you are running the check before the element has been removed.
The
current_rowvariable is the thing hanging around when you call.remove(), so I would not set it at all.
This works better:
$(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);
});
});
If you were doing a lot with current_row before you remove it, you can set the variable, but you must make sure you set it to null or it goes out of scope (ie the click function exits) before the fadeOut callback runs for it to work properly:
$(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;
});
solution3
1 2014-12-01 13:56:48
Given that you're fading out the element (as opposed to immediately removing it), it's best to delay calculations until after the fade has completed. To do this, change the function signature to accept a callback:
deleteEntry = function deleteEntry(current_row, callback) {
current_row.parent().parent().fadeOut(400, 0, function () {
current_row.remove();
callback();
});
};
The callback is called after the row has been removed.
Then, you change the caller code to:
deleteEntry(current_row, function() {
// 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);
});
solution4
0 2014-12-01 13:53:56
try this mate, current_row.parent().parent().remove(); , it worked for me, I guess you were deleting something wrong, fiddle demo
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Remove HTML element (DOM Node) from memory
Remove element from the DOM
How find and remove DOM element from directive?
How to remove HTML element from DOM with React
How to remove event listener from DOM element?
Remove DOM element from array
If dom element has pointer to closure, will this lead to memory leak if I remove dom element from page?
How to get element from inner DOM.(DOM with-in DOM)
DOM behaviour when we append/remove element from DOM
How avoid that CSS animation's delay remove element from DOM?
Related Tags