HTML表单jQuery克隆异常：点击添加按钮克隆了整个表单

问题根源 #

你当前的代码克隆了#form-container内部的所有内容（包括Add按钮、提交按钮和重置按钮），并追加到表单末尾，这才导致点击后出现多个重复按钮。正确的做法是只克隆你需要的输入组（.table-form容器），并插入到首个输入组与提交按钮之间的位置。

修正后的代码 #

HTML调整（优化字段命名，移除重复ID）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<form id="form-container" method="GET">
  <table id="input-group-wrapper">
    <div class="table-form">
      <label for="Field">Field </label>
      <select name="field[]" class="form-control">
        <option value="opt">label</option>
      </select>
      <label for="lookup">Lookup </label>
      <select name="lookup[]" class="form-control">
        <option value="iexact">iexact</option>
        <option value="icontains">icontains</option>
        <option value="in">in</option>
      </select>
      <label for="value">Value </label>
      <input type="text" name="value[]" value="current_value">
    </div>
  </table>
  <button id="add-form" type="button" class="btn btn-primary">Add form</button>
  <button type="submit" class="btn btn-primary">Search</button>
  <button type="submit" name="btn-reset" class="btn btn-secondary" value="btn-reset">Reset</button>
</form>

JS代码修改（精准克隆并插入）

// 克隆首个输入组作为模板
const inputGroupTemplate = $('.table-form').first().clone();

$('#add-form').click(function() {
  // 将新的输入组插入到表格内部，确保在提交按钮之前
  $('#input-group-wrapper').append(inputGroupTemplate.clone());
});

关键说明 #

1. 精准克隆目标：只克隆.table-form元素，避免包含按钮区域的内容
2. 正确插入位置：把克隆的输入组插入到表格容器内，而非表单末尾，保证在提交按钮之前显示
3. 优化表单兼容性：将name属性改为数组格式（如field[]），后端可直接接收多组输入值；移除重复的id="value"，避免违反HTML规范

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