Refresh table after using jQuery .append()
<p>The following code gets a JSON object and then spits its contents out into a <code>&lt;table&gt;</code>.  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 <code>.remove()</code> but there was an obvious deleting and then a refresh of data. </p>

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

<p>Thank you,</p>

<p>Aaron</p>
