JS中如何移除DataTable现有行？按钮触发渲染时旧数据清除失效

你遇到的旧数据无法移除问题，本质是两个DataTables开发的常见踩坑：

• DataTables初始化后会独立维护一份内部数据索引，和你手动往<tbody>节点追加的DOM不存在实时双向同步关系。如果不通过实例提供的专用API操作，只手动修改DOM，很容易出现内部索引残留，导致旧数据被重复渲染。
• 你之前尝试的清除操作本身存在错误：fnClearData()不是DataTables的官方方法；且你在每次ajax回调最后都重复执行$('#database').dataTable()做初始化，多份残留的旧实例会进一步干扰清除效果，导致操作看似完全失效。

优先推荐和现有逻辑兼容、无额外改造量的实现步骤：

1. 避免重复初始化DataTable实例
   把原来写在ajax成功回调末尾的$('#database').dataTable()移到页面初始化阶段，全局仅创建一次实例存储为全局变量，避免重复初始化造成的实例残留。初始化时加上destroy: true参数做兜底，即使意外重复执行初始化也不会报错。
   示例初始化代码：

   // 页面DOM加载完成后执行一次即可
   let passTableInstance = $('#database').DataTable({
       destroy: true
   });
   

2. 每次拉取新数据前先执行全量清除
   在ajax成功回调的最开头，调用存好的实例方法完成清除，不要手动操作tbody节点：
   • 调用passTableInstance.clear()会一次性清空DataTable内部存储的所有历史行数据
   • 紧跟draw()方法会同步把DOM上的所有旧行移除，完成页面渲染刷新
3. 追加新行时和实例保持同步
   把原来直接往tbody追加DOM的逻辑，替换为实例提供的row.add()方法添加新行，保证内部数据和DOM完全一致，避免后续再出现清除失效的问题：

   $.ajax({
       url: "/getSpecificPass",
       type: "POST",
       contentType: "application/json",
       data: JSON.stringify(val.casename),
       dataType: "JSON",
       success: function(response) {
           // 第一步：全量清除旧数据
           passTableInstance.clear().draw();
   
           // 第二步：渲染新的匹配数据
           $.each(response.result, function(key, val) {
               let rowHtml = "<tr>";
               rowHtml += "<td>" + localStorage.getItem('case_name') + "</td>";
               rowHtml += "<td>" + val.password + "</td>";
               rowHtml += "<td>" + val.hash + "</td>";
               rowHtml += "</tr>";
               // 通过实例添加新行，最后一次draw完成渲染
               passTableInstance.row.add($(rowHtml)).draw(false);
           });
       }
   });
   

如果暂时不想改动原有“拼HTML追加到tbody”的逻辑，可以按下面的顺序操作，也能实现全量清除效果：

在ajax成功回调的最开头，依次执行两步操作，再跑你原来的渲染逻辑：

1. 手动清空tbody的所有DOM节点：$('#database tbody').empty()
2. 检测并销毁已存在的旧DataTable实例，避免内部索引残留导致旧数据回流：

   if ($.fn.DataTable.isDataTable('#database')) {
       $('#database').DataTable().destroy();
   }
   

走完这两步，再执行原来的each拼行、追加DOM、重新初始化DataTable的逻辑，就不会出现旧数据残留的问题。
这个方案可以解释你之前“直接替换HTML没效果”的原因：你之前写HTML覆盖的时候没有先销毁旧的DataTable实例，旧实例内部存储的历史数据会在重新初始化时被自动渲染回表格，看起来就像清除操作没生效。

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