如何使用jQuery移除动态添加的表格？重复点击按钮替换表格数据

你的核心问题是重复点击按钮后旧表格未被正确移除，导致新旧表格并存。主要原因和修复方案如下：

1. 修正选择器的空格问题 #

你代码里的$(" .spinner")前面多了一个空格，这会让jQuery查找所有包含.spinner类的后代元素，而非直接匹配带有.spinner类的元素。这可能导致新表格被添加到错误位置，旧表格仍留在DOM中。

把选择器改成$(".spinner")即可：

// 原代码
$(" .spinner").after($gameBoard);
// 修改后
$(".spinner").after($gameBoard);

2. 确保旧表格被彻底移除 #

虽然你调用了$("#jeopardy").remove()，但如果选择器匹配不到元素（比如第一次点击时表格还不存在），这行代码不会报错但也不会有效果。结合上面的选择器修正，第二次点击时旧表格会被正常移除。

3. 更高效的方案：复用表格元素 #

每次创建新表格再移除旧表格的方式不够高效，你可以复用已有的表格元素，只清空内容再重新填充：

async function setupAndStart() {
  showLoadingView();

  // 尝试获取已存在的表格，不存在则创建并插入DOM
  let $gameBoard = $("#jeopardy");
  if ($gameBoard.length === 0) {
    $gameBoard = $("<table></table>").attr("id", "jeopardy");
    $(".spinner").after($gameBoard);
  }

  // 清空表格内的所有内容，重新添加thead和tbody
  $gameBoard.empty()
    .append($("<thead></thead>"))
    .append($("<tbody></tbody>"));

  await fillTable();

  hideLoadingView();
}

额外注意 #

确保fillTable函数中是操作$("#jeopardy")下的thead和tbody，比如：

async function fillTable() {
  const $thead = $("#jeopardy thead");
  const $tbody = $("#jeopardy tbody");
  // 这里填充表头和表体内容
}

内容的提问来源于stack exchange，提问作者Kwok