Refresh table after using jQuery .append()

Question

The following code gets a JSON object and then spits its contents out into a <table>. The first time I do it I get my JSON content just fine. However, when I refresh, the refreshed data is stuck onto the bottom of my table. How do I refresh the data to show the new data only? I tried using .remove() but there was an obvious deleting and then a refresh of data.

    $(function() {
        $('#ReportedIssue').change(function() {
            //$('.data').remove()
            $.getJSON('/CurReport/GetUpdatedTableResults', function(json) {
                for (var i = 0; i < json.GetDocumentResults.length; i++) {
                    $('#DocumentInfoTable').append(
                        "<tr class='data'>" +
                        "<td>" + json.GetDocumentResults[i].Document.DocumentId + "</td>" +
                        "<td>" + json.GetDocumentResults[i].Document.LanguageCode + "</td>" +
                        "<td>" + json.GetDocumentResults[i].ReportedIssue + "</td>" +
                        "<td>" + json.GetDocumentResults[i].PageNumber + "</td>" +
                        "</tr>"
                    );
                };
            });
        });
    });

Thank you,

Aaron

Answer 1

It will be more efficient to build the HTML as follows (and of course, solves the problem you're experiencing):

$(function() {
    $('#ReportedIssue').change(function() {
        //$('.data').remove()
        $.getJSON('/CurReport/GetUpdatedTableResults', function(json) {
            var str = '';
            for (var i = 0; i < json.GetDocumentResults.length; i++) {
                str += "<tr class='data'>" +
                    "<td>" + json.GetDocumentResults[i].Document.DocumentId + "</td>" +
                    "<td>" + json.GetDocumentResults[i].Document.LanguageCode + "</td>" +
                    "<td>" + json.GetDocumentResults[i].ReportedIssue + "</td>" +
                    "<td>" + json.GetDocumentResults[i].PageNumber + "</td>" +
                    "</tr>"
            };

            $('#DocumentInfoTable').html(str);
        });
    });
});