Javascript 为什么我不能在Rails应用程序中再次呈现HTML div（包含数据表）之前隐藏它？

背景

这是我试图做的一个清晰的解释：

我有一个Rails表单（我称之为“预搜索”表单），其中包含一个下拉列表

当下拉选择更改时，将向用户显示一个搜索表单（该表单允许用户选择一些搜索条件） 此表单包含一个“运行搜索”按钮，用于提交表单选择

当在上面的表单上单击“运行搜索”时，表单正下方会显示一个数据表

问题

这是我的问题：

当更改上述表单中的搜索条件并再次单击“运行搜索”时，我希望： I.先前显示的要删除的数据表，以及 二,。要在显示旧数据表的位置显示的新数据表 但事实并非如此。我看到更多的数据表被添加到页面中，而不是每次都删除旧的数据表并替换它。因此，如果我运行搜索4次，我会在页面中看到4个数据表。我只想看到一个datatable，看看我运行搜索的次数

代码

这是我的预搜索表单，带有下拉列表：

类别：0））%>
$（函数（）{
$（文档）。关于（“更改”、“搜索”类别），函数（事件）{
$.ajax（'show\u search\u form'{
键入：“GET”，
数据类型：“脚本”，
数据：{
搜索类别：$（“#搜索类别”）.val（）
},
错误：函数（jqXHR、textStatus、errorshown）{
返回console.log（“AJAX错误：+textStatus”）；
}
});
});
});

这是在上述“预搜索”表单中更改下拉选择时调用的routes条目：

routes.rb

get”/show_search_form=>“search#show_search_form”，：as=>：show_search_form

这是由于上面的routes条目而执行的控制器功能：

搜索控制器.rb

class SearchController“search/show\u search\u form.js.erb”
结束

这是上述控制器函数渲染的部分内容：

search/show\u search\u form.js.erb

/*单击“运行搜索”按钮时处理事件*/
$（文档）。在“单击”、“搜索”和“运行”按钮上，函数（事件）{
$.ajax（'搜索\运行'{
键入：“GET”，
数据类型：“脚本”，
数据：{
搜索实体：$（“#搜索实体”）.val（）
},
错误：函数（jqXHR、textStatus、errorshown）{
返回console.log（“AJAX错误：+textStatus”）；
}
});
});

这是上面表单中单击按钮的路线条目：

get”/search\u run“=>“search\35; run\u search”，：as=>：search\u run

这是上面的routes条目调用的控制器函数：

def运行搜索
logger.info“SearchController运行搜索”
$search\u entity=params[：search\u entity]
data\u table=SearchDatatable.new（查看上下文）
回应待办事项|格式|
format.html
format.json do
呈现json:{
“pageLength”=>数据表。页面长度，
“recordsTotal”=>数据表记录总数，
“recordsFiltered”=>data\u table.records\u filtered，
“数据”=>数据表。运行数据
}
结束
结束
render:partial=>“搜索/运行_search.js.erb”
结束

这是上面的控制器函数调用的部分：

search/run_search.js.erb

$（'#datatable_div'）.hide（）；
$（'#datatable_div'）.hide（）.after（''search/run_search'））%>；

如您所见，我在呈现数据表之前隐藏了

datatable\u div

。但是，数据表仍然被追加到页面中，而不是被覆盖

如何每次都覆盖

datatable\u div

以便无论在页面上执行了多少次搜索，始终只显示一个datatable

请帮忙

这是datatable呈现代码，以防与此相关：

search/run\u search.html.erb

专栏1
专栏2
$（文档）.ready（函数（）{
$（“表[role='search\u datatable']）{
var table=$（this）.DataTable({
columnDefs:[
{“orderable”：true，“targets”：1}，
],
AO列：[
{mData:'column1'}，
{mData:'column2'}
],      
自动宽度：正确，
页长：50，
处理：对，
服务器端：是的，
sDom:“ltipr”，
ajax:$（this.data（'url'））
});
});
});  

我根据stackoverflow用户的评论尝试了这些方法：

方法1（基于@MikeHeft建议）

方法1。a）

$（'datatable_div'）.html（''.html（'search/dbr/run_search'））%>；

这种方法发生了什么？

即使是第一次，这也不会呈现datatable。它永远不会呈现任何数据表

方法1。b）

$（'datatable_div'）.html（''）.after（'search/dbr/run_search'））%>；

这种方法之后发生了什么？

---

这将使datatable正常工作—但它仍然会让我回到我的原始问题—它不会在下次运行搜索时替换现有的datatable。它只是不断向我的搜索页面添加越来越多的数据表。

您可以尝试将html设置为空字符串，然后将hmtl设置为新的数据表<代码>$（'#datetable'）.html（''.html（''）您可以重新加载该表吗