Question

I have a table that returns results from a search. When the user search for something else, the same results exist and the table is just populating the data without removing the previous search. This is all on a JSON result action with no postback so the page is not reloaded. When the page is refreshed, I get an empty table. I tried using the following code.

$('searchTable').find("tr:gt(0)").remove();
$('searchTable').children('tr:not(:first)').remove();
$('searchTable td').parent().remove();

on the following table

<table id="searchTable">
    <tr>
        <th>Name</th>
        <th>Address</th>
        <th>IdNumber</th>
        <th>Status</th>
        <th>Date</th>
    </tr>        
    <tr>
        <td class="name"></td>
        <td class="address"></td>
        <td class="idNum"></td>
        <td class="status"></td>
        <td class="date"></td>
    </tr>
</table>

How do I remove the previous search results before I go to my JSON response?

Answer 1

You’re missing the # in your #ID selector, like this:

$('#searchTable tr:gt(0)').remove();

You can try it out here, without the # it’s an element selector, and it’s looking for a <searchTable> element.