Javascript 将新字段追加到表单

如何在表单上动态添加/删除新的输入字段，而不使用分部

<%= f.fields_for :list_entries do |list_entry| %>
  <div id="entries">
    <div class="control-group" id="new_entry">
      <%= list_entry.label :description, 'Description:', class: "control-label mandatory_field"%>
      <div class="controls">
        <%= list_entry.text_field(:description, class: "m-wrap col-lg-8")%>
      </div>
    </div>
    <a href="javascript:;" id="addNewEntry">Add Entry</a>
  </div>
<% end %>

$（文档）.ready（函数（）{
$（'#addNewEntry'）。单击（函数（）{
$（“#条目”）.append（）
});
$（“#条目”）。在（'单击'，'列出#条目'，函数（）上{
$（this）.closest（'.control group'）.remove（）；
});
});

我不知道该在附件里放什么。如果我将HTML代码放在append中，则

列表项

的

字段不会转移。同样的事情发生在我使用偏微分方程时。我也不想使用cocoon gem，因为这是我应用程序中非常小的一部分

有什么想法吗
 我在这里看到了两种不同的可能性

您可以使用append，并执行以下操作
$（对象）。追加（“”）

向服务器发送ajax请求。服务器将使用类似于
respond.js.erb
的视图进行响应，您可以在其中执行以下操作

$（对象）。追加（'

在partial中，您可以生成所需的任何代码
您需要记住，第一个代码块中的erb模板是在服务器上运行的，用于生成原始html。第二个代码块中的javascript是在客户端中运行的，并且只能与原始html一起工作-它从未看到生成html的rails代码。因此，当考虑关于您希望javascript做什么，您需要查看页面上的html以及您可以使用它做什么。在这种情况下，您可以有一个虚拟的、隐藏的html，javascript将其克隆、更改一些属性，然后添加到字段列表中。
<script>
    $(document).ready(function(){
       $('#addNewEntry').click(function(){
          $('#entries').append()
       });
          $('#entries').on('click', '#list_entry', function(){
              $(this).closest('.control-group').remove();
          });
    });
</script>