How to remove the entire table that was dynamically added to the page using jQuery? A table will be created and data will be added when users click a start button. The table and data should be removed and replaced with new data when the same button is clicked again.

Firstly, using remove() is not removing the entire table.
Secondly, when the button is clicked again, a new table with data is appended(added). So two tables are side by side on the web page.

async function fillTable() {
  // create thead, tbody, and tds
  // fill the thead and tbody
}

async function setupAndStart() {
  // UNIMPLEMENTED
  $("#jeopardy").remove();

  showLoadingView();

  // make HTML table
  const $gameBoard = $("<table></table>");
  $gameBoard
    .attr("id", "jeopardy")
    .append($("<thead></thead>"))
    .append($("<tbody></tbody>"));

  $(".spinner").after($gameBoard);

  await fillTable();

  hideLoadingView();

}

$("#start-btn").on("click", setupAndStart);

I tried to remove() the table, and empty the thead, tbody, tr. But it did not work and same problem exist.

Thank you in advance for any input.