jQuery cleaning HTML table

This is my table:

        <tr class=stuff>
            <td id=id></td>
            <td id=city_id></td>
            <td id=temp></td>
            <td id=date></td>
        </tr>

This is my Javascript:

<script>
    $(document).ready(function() { // waits when document is ready
        $('.data').change(function() { // when dropbox value changes do this
            getWeather(); // here I tried inserting table clearing code
        });
    });

    function getWeather() {
        $.getJSON('getTemperature/' + $('.data option:selected').val(), null, function(data) { // JSON request
            $("#id").text(data.id); // changes fields accordingly
            $("#city_id").text(data.city_id);   
            $("#temp").text(data.temperature);  
            $("#date").text(data.date); 
        });
    }
 </script>

Every item in dropdown menu does not have response from server, so I want it to clear the开发者_如何学Go table just before making a new JSON request. So when JSON comes back with data, data is updated accordingly, but when JSON comes back with nothing, then all the tables will be empty.

At the moment when JSON retrieves no data, the old data still remains in the table.

I tried using $('.stuff').remove() and $('.stuff').clean() , but after using them right before getWeather(); then later I wasn't able to put info into table which I received from JSON. It just did not work anymore.

Feel free to ask any questions.

Try this

$('.stuff td').text("");
getWeather();

Depending how much of this sort of thing you will be doing on your site you might want to look into KnockoutJS, it is designed for dynamic displays with changing data, including auto hiding sections.