high memory usage when creating and removing a table on the fly using jquery

i have a page that contains a date picker and a div, by selecting a date from date picker all customers of that date populated using jquery ajax and then displayed using a table.

everything works fine and customers displayed correctly.but browser memory usage grows by removing the old table and adding another table, it seems that the old DOM objects remains in the memory....

after a while the page is useless because of very high memory usage of browser....

is there any solution to this?

 <script type="text/javascript">
    $(document).ready(function () {
        $("#datepicker").datepicker({ onSelect: function (dateText, inst) { fillList(dateText) } });
    });
    function fillList(date) {
        var visitTypes = ['!', 'ویزیت اول', 'تقویم غذایی', 'رژیم', 'وزن', 'LPG', 'اندرمولب'];
        var sendTypes = ['!', 'حضوری', 'فکس', 'ایمیل', 'پیک', 'پست', 'تلفن', 'وب سایت'];
        var statusIcons = ['', 'i_w', 'i_vt', 'i_v', 'i_vt', 'i_f', 'i_e', 'i_en', 'i_fas', 'i_fr'];
        $.ajax({ url: "../CustomControls/ReceptionHandler.ashx?date=" + date, context: document.body, success: function (result) {
            var items = $.parseJSON(result);
            var i = 0;
            $table = $('<table/>').attr({ 'id': 'listitems', 'cellpadding': '1', 'cellspacing': '1' }).css({ 'width': '100%', 'background-color': '#494949', 'text-align': 'center', 'font-weight': 'bold' });
            $head = $('<tr/>').attr('class', 'HeaderStyle');
            $head.append($('<td/>').attr('class', 'r').html('ردیف'));
            $head.append($('<td/>').attr('class', 'i'));
            $head.append($('<td/>').attr('class', 'p').html('نام-نام خانوادگی'));
            $head.append($('<td/>'));
            $head.append($('<td/>').attr('class', 'v').html('ویزیت'));
            $head.append($('<td/>'));
            $head.append($('<td/>').attr('class', 't').html('ساعت'));
            $head.append($('<开发者_如何转开发td/>').attr('class', 'o').html('عملیات'));
            $table.append($head);
            $.each(items, function () {
                r = $('<tr/>');
                if (i % 2 == 0) {
                    r.attr('class', 'RowStyle');
                }
                else {
                    r.attr('class', 'AlternatingRowStyle');
                }
                r.append($('<td/>').html(++i));
                r.append($('<td/>').attr('class', statusIcons[this.status]));
                r.append($('<td/>').attr('class', this.id).html((this.name + ' ' + this.family)));
                r.append($('<td/>').html((this.send != undefined ? sendTypes[this.send] : '')));
                r.append($('<td/>').html(visitTypes[this.vtype]));
                r.append($('<td/>'));
                r.append($('<td/>').html(this.time));
                r.append($('<td/>'));
                $table.append(r);
            });
            $("#listitems").remove();
            $("#list").append($table);
        }
        });
    }

</script>

 <div id="toolbar" style="width: 100%;">
     <input id="datepicker" type="text" />
 </div>
 <div id="list" style="width: 100%;">
 </div>

update: i also used this method , but problem not solved:

                       var output = '<table style=\'width:100%;background-color:#494949;text-align:center;font-weight:bold;\' cellpadding=\'1\' cellspacing=\'1\'>';
                            output += '<tr class=\'HeaderStyle\'>';
                            output += '<td class=\'r\'>ردیف</td>';
                            output += '<td class=\'i\'></td>';
                            output += '<td class=\'p\'>نام-نام خانوادگی</td>';
                            output += '<td></td>';
                            output += '<td class=\'v\'>ویزیت</td>';
                            output += '<td></td>';
                            output += '<td class=\'t\'>ساعت</td>';
                            output += '<td class=\'o\'>عملیات</td>';
                            output += '</tr>';
                            $.each(items, function () {
                                i % 2 == 0 ? output += '<tr class=\'RowStyle\'>' : output += '<tr class=\'AlternatingRowStyle\'>';
                                output += '<td>' + ++i + '</td>';
                                output += '<td class=\'' + statusIcons[this.status] + '\'></td>';
                                output += '<td class=\'' + this.id + '\' onmouseout=\'hd();\' onmouseover=\'sd2(\'' + this.id + '\');\'>' + this.name + ' ' + this.family + '</td>';
                                output += '<td>' + (this.send != undefined ? sendTypes[this.send] : '') + '</td>';
                                output += '<td>' + visitTypes[this.vtype] + '</td>';
                                output += '<td></td>';
                                output += '<td>' + this.time + '</td>';
                                output += '<td></td>';
                                output += '</tr>';
                            });
                            output += '</table>';
              $("#list").html('');
            $("#list").html(output);

user ,

Construct your string and use finally .append.

don't use so many appends , append is very costly operation

do all your string manipulation in a string until it is finished

a sample example

instead of this

var lihtml = "<li class='green'>this is a test text</li>",
        listring = "";

    function populatelist() {
            for (var i = 0; i < 10000; i++) {
            $('#listparent').append("test");
            }    


        }  

this will be good

var lihtml = "<li class='green'>this is a test text</li>",
    listring = "";

function populatelist() {
        for (var i = 0; i < 10000; i++) {
            listring += lihtml;
        }    

        $('#listparent').append(listring);

    }   

What I immediately noticed is the lack of chaining, which is one of many powerful features in jQuery. John Resig wrote on his blog about ultra-chaining that you'd might want to take a look at.

Other then that, I can't really see where the problem is. This rather seems to be a browser-related problem rather then a jQuery-related one.