jQuery replace table rows with new data

I'm trying to replace a table with new data I get via ajax. The first time works just fine, but then the rows get added instead of replaced, so I end up with duplicate rows.

Here's some of my code:

            success: function(data){            
            $("#featured_listing_tbody").children( 'tr:not(:first)' ).remove();
            counter= 1;
            $.each(data, function(i, val){  
                        newPropertyRows += '<tr>';
                                $.each(val, function(key, info){
                                    var skip = false;
                                        if(key == "Id") {                                           
                                                Id =  info;
                                                newPropertyRows += '';
                                                skip = true;
                                        }
                                        if(key == "thumbs"){
                                                info = '<img width="100px" src=uploads/properties/'+Id+'/thumbs/'+info+' />';
                                                newPropertyRows += '<td class="col'+counter+'"><开发者_开发技巧;a href="/featured.php?prop='+Id+'">'+info+'</a></td>';  
                                                skip = true;
                                                counter++;      
                                        }
                                        if(skip == false){
                                                newPropertyRows += '<td class="col'+counter+'"><a href="/featured.php?prop='+Id+'">'+info+'</a></td>';                      
                                                counter++;      
                                        }

                                        info = '';
                                });                     
                        newPropertyRows += '</tr>';                         
            });                     
                $("#featured_listing_tbody").html(newPropertyRows);
        }

Probably the problem is not in the part of code which you posted. For example in the current code you use always += operation with the newPropertyRows variable. Are you reset it to empty string before every ajax call?

By the way it seems to me that you don't call $("#featured_listing_tbody").children( 'tr:not(:first)' ).remove() at the beginning of success handler because you use $("#featured_listing_tbody").html(newPropertyRows); later which will overwrite the whole body of the table.

I have a suggestion, instead of returning a data object and converting it to HTML in javascript, just return the data as the required table rows. As you're already generating them for the page you should have the logic/template to do it again easily.

To replace the data I would just include a <tbody> tag around your data rows, and in your ajax success function just replace its contents - instead of doing the complicated selector to omit the first table row which I assume are you column headers.

$("#featured_listing tbody").html(data); //Replace contents of <tbody> tag

And the table:

<table>
    <thead><tr>....row headers...</tr></thead>
    <tbody>...data rows...</tbody>
</table>

Not quite sure if you store the record for the table or it's real-time and not stored anywhere.

But if it's stored, you could try generating the html for the entire table or just the rows at the server side and then simply replace the container / table content with the data received from the server.