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