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

Reply via email to