Clear table with jQuery

Question

When I call the loadTable function for the first time, the information is displayed correctly, if I call the function again, the information is displayed twice on the HTML page (one of them below).

Try deleting the information before the for loop with:

$("#tabla").remove();
$("#tabla").empty(); 

But the information is not deleted.

HTML:

<div id="divTabla"><table style="width:100%" border="1" id="tabla"></table></div>

JavaScript:

function loadTable(datos) {
for (var i = 1; i < datos.length; i++) {
    d+= '<tr>'+
    '<td>'+datos[i].Host+'</td>'+
    '<td>'+datos[i].Time+'</td>'+
    '<td>'+datos[i].Country+'</td>'+
    '<td>'+datos[i].City+'</td>'+
    '<td>'+datos[i].Isp+'</td>'+
    '<td>'+datos[i].Latitude+'</td>'+
    '<td>'+datos[i].Longitude+'</td>'+    
    '</tr>';
}
$("#tabla").append(d);
}

Does anyone know what is wrong with the code or how can I delete information correctly?

Edit:

When I call methods, I do it like this:

function cargarTabla(datos) {
//Using only one at a time    
$("#tabla").empty(); //Doesn't work
$("#tabla").remove(); //The table is never displayed
for (var i = 1; i < datos.length; i++) {
    d+= '<tr>'+
    '<td>'+datos[i].Host+'</td>'+
    '<td>'+datos[i].Time+'</td>'+
    '<td>'+datos[i].Country+'</td>'+
    '<td>'+datos[i].City+'</td>'+
    '<td>'+datos[i].Isp+'</td>'+
    '<td>'+datos[i].Latitude+'</td>'+
    '<td>'+datos[i].Longitude+'</td>'+    
    '</tr>';
}
$("#tabla").append(d);
}

The declaration of the variable d: is declared in the same js file where the loadTable function is located, as follows (this is the table header):

var d = '<tr>'+'<th>Host</th>'+'<th>Time(ms)</th>'+'<th>Pais</th>'+'<th>Ciudad</th>'+'<th>ISP</th>'+'<th>Latitud</th>'+'<th>Longitud</th>'+'</tr>';

Answer 1

() . , d, reset, .

function loadTable(datos) {
  var d = ""; // <--------
  for (var i = 1; i < datos.length; i++) {
    d+= '<tr>'+
    '<td>'+datos[i].Host+'</td>'+
    '<td>'+datos[i].Time+'</td>'+
    '<td>'+datos[i].Country+'</td>'+
    '<td>'+datos[i].City+'</td>'+
    '<td>'+datos[i].Isp+'</td>'+
    '<td>'+datos[i].Latitude+'</td>'+
    '<td>'+datos[i].Longitude+'</td>'+    
    '</tr>';
  }
  $("#tabla").empty().append(d);
}

Answer 2

. remove() . . Empty() loadTable. 'd' , ​​ , , reset. d , . for 1, 0, .

loadTable([{Host: 'host', Time: 'time', Country: 'country', City: 'city', Isp: 'isp', Latitude: 'latitue', Longitude: 'longitude'}]);

function loadTable(datos) {
$("#tabla").empty(); 
var d = '';
for (var i = 0; i < datos.length; i++) {
    d+= '<tr>'+
    '<td>'+datos[i].Host+'</td>'+
    '<td>'+datos[i].Time+'</td>'+
    '<td>'+datos[i].Country+'</td>'+
    '<td>'+datos[i].City+'</td>'+
    '<td>'+datos[i].Isp+'</td>'+
    '<td>'+datos[i].Latitude+'</td>'+
    '<td>'+datos[i].Longitude+'</td>'+    
    '</tr>';
}
$("#tabla").append(d);
}

Answer 3

Change the last line of the function to

$("#tabla").empty().html(d);