[jQuery] How do I avoid this leak?
Here's what I'm doing:
- I have table element that needs to be populated from JSON coming in
from an XHR.
- Calling empty() on the table's tbody to get rid of the rows from
previous responses, and buiding new <tr> and <td> elements for the
newly returned data.
According to drip, every time i empty the table body and refill it
with new elements i'm leaking memory for each of the <tr> and <td>
elements, and a whole bunch of <div> elements.
Is there another way to build DOM elements and then get rid of them
witout leaking memory?
here's a very simplified example that leaks memory every time i call
fillTable() :
var tableLikeObject = {
rows:[{col1:'bar',col2:'bat'},{col1:'foo',col2:'baz'}]
}
function fillTable(){
//get a reference to the html table body, and empty the table's
previous set of rows
var tbody = $('#resultsTable tbody');
tbody.empty();
//re-populate the table
$.each(tableLikeObject.rows,function(i,obj){
$('<tr></tr>')
.append($('<td></td>').text(obj.col1))
.append($('<td></td>').text(obj.col1))
.appendTo(tbody);
});
}
any advice is appreciated