reset append prima di un nuovo select con jquery

[carlos84]

Salve, mi servirebbe un aiuto, in pratica ricavo da una chiamata ajax dei dati da mysql che normalmente con php ricavarei ciclicamente con foreach. Sto cercando di farli con ajax in modo dinamico.
In questo modo funziona, solo che ogni volta che seleziono dalla barra a tendina, mi aggiunge i dati nuovi e lascia anche i dati vecchi. Come posso fare per fare in modo che ad ogni select si resetti tutto e mi aggiunga solo i dati del select e cancelli quelli già estrapolati?

 <table id="userTable" border="1" >
      <thead>
        <tr>
          <th width="5%">S.no</th>
          <th width="95%">Username</th>
          
        </tr>
      </thead>
      <tbody></tbody>
   </table>

 <select id="select">
<option value="">---</option>
<?php foreach ($data['prova'] as $prova) : ?>

<option value="<?php echo $prova->id; ?>"><?php echo $prova->name; ?></option>
 <?php endforeach; ?>
 </select>  

<script>
$(document).ready(function() {
    $('#select').change(function() {
        var id = $(this).val();
        $.ajax({
            url: '<?php echo URLROOT; ?>/workshop',
            type: 'post',
            data: {request: 1, craftId: id},
            dataType: 'json',
            success: function(response) {
                
                if (id > 0) {
                     $.each(response,function(key,value){
                     var name = value.name;
                     var tr_str = "<tr>" + 
                    "<td align='center'>" + key + 
                    "<td align='center'>" + name + "</td>" +
                    
                    "</tr>";
                    
    $("#userTable tbody").append(tr_str); 
    
                     });   
                } else {
                    //
                  
                }
            }
        });
    });
});
</script>

[ciro78]

provato a resettare il body della tabella con

                
    $("#userTable tbody").html("");

prima del ciclo for?

[carlos84]

provato a resettare il body della tabella con

                
    $("#userTable tbody").html("");

prima del ciclo for?

avevo risolto con questa soluzione mettendo dei div, ma la tua è più sbrigativa. Comunque entrambe fanno la stessa cosa.Ti ringrazio

$('#userTable').find('div:not(:first)').remove();

[ciro78]

di nulla figurati