JavaScript Formset添加字段时重复生成删除按钮问题求助

嘿，我明白你遇到的问题了——每次克隆表单时，原表单里的删除按钮也被一起复制，再加上可能你还在克隆后重复执行添加按钮的代码，自然就会出现重复的删除按钮啦。咱们来一步步解决这个问题：

问题根源 #

你的初始代码把addButton和removeButton都直接追加到了.myForm内部，导致第一个表单本身就包含这两个按钮。当你克隆这个表单时，新生成的表单会自带这些按钮；如果之后你又执行了追加按钮的逻辑，就会让同一个表单里出现多个删除按钮。

解决方案1：分离添加按钮，克隆时清理多余元素 #

把添加按钮移到表单外部，只在表单内保留删除按钮，克隆后主动移除带过来的多余按钮，确保每个表单只有一个删除按钮：

// 初始化：把添加按钮放在表单容器外，只给第一个表单添加删除按钮
$('<span class="addButton"> ADD </span>').appendTo('.form-container');
$('<span class="removeButton"> DELETE </span>').appendTo('.myForm:first');

// 处理添加按钮点击事件
$('body').on('click', '.addButton', function(){
  // 克隆第一个表单，插入到最后一个表单的后面
  const newForm = $('.myForm:first').clone().insertAfter('.myForm:last');
  
  // 清空新表单里的输入框、下拉框值
  newForm.find("input,select").val('');
  
  // 移除克隆过来的添加按钮（原表单里带的，不需要保留在新表单中）
  newForm.find('.addButton').remove();
  
  // 确保新表单有且只有一个删除按钮
  if (!newForm.find('.removeButton').length) {
    $('<span class="removeButton"> DELETE </span>').appendTo(newForm);
  }
});

// 处理删除按钮点击事件
$('body').on('click', '.removeButton', function(){
  // 至少保留一个表单，避免全部删光
  if ($('.myForm').length > 1) {
    $(this).closest('.myForm').remove();
  } else {
    alert('至少需要保留一个表单哦');
  }
});

解决方案2：使用隐藏模板（更推荐，结构更清晰） #

准备一个不带任何按钮的隐藏模板表单，克隆这个纯净的模板来生成新表单，再给每个新表单单独添加删除按钮；添加按钮只保留一个在表单容器外部：

调整后的HTML结构

<!-- 隐藏的模板表单，仅用于克隆，不要显示 -->
<div class="myForm template" style="display: none;">
  <!-- 这里放你的表单字段 -->
  <input type="text" name="username">
  <select name="role">
    <option value="">请选择角色</option>
    <option value="admin">管理员</option>
    <option value="user">普通用户</option>
  </select>
</div>

<!-- 存放所有表单的容器 -->
<div class="form-container">
  <!-- 初始显示的第一个表单 -->
  <div class="myForm">
    <input type="text" name="username">
    <select name="role">
      <option value="">请选择角色</option>
      <option value="admin">管理员</option>
      <option value="user">普通用户</option>
    </select>
    <span class="removeButton"> DELETE </span>
  </div>
</div>

<!-- 添加按钮放在容器外，只需要一个 -->
<span class="addButton"> ADD </span>

对应的JavaScript代码

// 添加按钮点击事件
$('.addButton').click(function(){
  // 克隆模板表单，移除模板类并显示出来
  const newForm = $('.myForm.template').clone().removeClass('template').show();
  
  // 清空新表单的输入框、下拉框值
  newForm.find("input,select").val('');
  
  // 给新表单添加唯一的删除按钮
  $('<span class="removeButton"> DELETE </span>').appendTo(newForm);
  
  // 把新表单放到容器里
  newForm.appendTo('.form-container');
});

// 删除按钮点击事件
$('body').on('click', '.removeButton', function(){
  // 确保至少保留一个可用表单（排除隐藏的模板）
  if ($('.myForm:not(.template)').length > 1) {
    $(this).closest('.myForm').remove();
  } else {
    alert('不能删除最后一个表单哦');
  }
});

这种方式从根源上避免了按钮重复的问题，因为克隆的是没有任何按钮的纯净表单字段，结构更清晰，后续维护也更方便。

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