Очистка содержимого HTMLTableElement

Question

У меня есть следующий элемент таблицы:

<table id="my-table" class="table table-striped table-hover ">Loading...</table> 

Я динамически создавать таблицы внутри вызова AJAX, а затем записывает данные в таблицу:

<script> 
$.ajax({ 
    success:function(result){ 
    $.getScript("table-sort-controller.js", function() { 
     sortTable("my-table") 
    }); //makes table sortable using DataTables 
    $.getScript("search-controller.js"); //makes table searchable using DataTables 
    }, 
    url: "http://myserver:8080/url/" 
    }).then(function(data) { 
    var table = "<thead>"; 
    table += createTableHeader(data); //fake method to simplify code 
    table += "</thead>"; 
    table += "<tbody id='sortable-cells'>"; 
    table += createTableBody(data); //fake method to simplify code 
    table += "</tbody>"; 
    //This is the line where I try to clear "Loading...". 
    document.getElementById("my-table").innerHTML = table; 
}); 
</script> 

Однако , Я не могу удалить "Loading..." сверху поверх загруженной таблицы. Я попытался следующие в линии непосредственно после моего создания таблицы:

document.getElementById("my-table").innerHTML = ""; 
document.getElementById("my-table").empty(); 
//a few other attempts I cannot remember 

Некоторые подробнее:

alert(document.getElementById("my-table")); //output is [object HTMLTableElement] 
alert(document.getElementById("my-table").innerHTML); //output is empty alert 
alert(document.getElementById("my-table").getCaption()); //console says "undefined is not a function" 

Я неясно, почему неопределенными getCaption() возвращается, как представляется, функция под W3C.

Как удалить "Loading..." после того, как моя таблица закончила загрузку и до того, как я заполнил #my-table с помощью соответствующего HTML? В качестве альтернативы, как я могу удалить "Loading..." сразу после написания таблицы?