Delete a table when changing input data

I have the following table:

which is generated immediately, but when making a change of dates with

 $("#p-fechaIni").change(function() {

          tablaP($("#p-fechaIni").val(), $("#p-fechaFin").val());

        });

Send the data and make a new JSON with new data and create another table but below it:

The question here is how can I delete the table that is created when I change the dates and create the new table with the new data, that does not put it under the other table, but only one. try to do it with the function remove() :

$("#p-fechaIni").change(function() {
   $("#tablaDatos").remove();
   tablaP($("#p-fechaIni").val(), $("#p-fechaFin").val());

}); 

  

HTML

<table id="tablaDatos" class="table table-striper table-bordered table-hover">
</table> 


function tablaP(datoFechaI, datoFechaF){
        peticionDatos(
          '<?= base_url(); ?>index.php/ejemplo/usuario/datos',
            {},
            function(){},
            function(datos){
              //$("#tablaDatos").remove();
                var strtabla = "<thead><tr><td colspan='2'>Lugar</td>";
                var strDiv = "</tr><tr><td>Usuario</td><td>Rol</td>";
                var cont=0;

                $(datos).each(function(i,e){



                    strtabla += "<td colspan='2'id='c-"+e.id+"' data-lugar='"+(e.id)+"'>"+e.nombre+"</td>";
                    cont++;

                    strDiv += "<td  id='c-"+e.id+"' data-lugar='"+(e.id)+"'>Nº A.</td><td  id='c-"+e.id+"' data-lugar='"+(e.id)+"'>Saldo</td>";


                });

                strtabla += strDiv+"</tr></thead>";
                $("#tablaDatos").append(strtabla);
                cargaNum(cont, datoFechaI, datoFechaF); // esta funcion es para crear el body de la tabla con otros datos al igual que el thead se crea con la funcion append dependiendo los datos.
        });
      }

to which I delete the table but do not create the new one ... someone who can help me?