求助：点击添加更多表单按钮后生成相同表单的代码实现

下面是一套完整的实现代码，支持点击按钮克隆并添加与原表单完全一致的表单组件，同时处理表单值清空、字段命名唯一性问题：

HTML 结构 #

<div id="form-container">
  <!-- 初始表单模板 -->
  <div class="form-group">
    <h3>表单 #1</h3>
    <div class="form-field">
      <label>姓名:</label>
      <input type="text" name="name_1" placeholder="请输入姓名">
    </div>
    <div class="form-field">
      <label>邮箱:</label>
      <input type="email" name="email_1" placeholder="请输入邮箱">
    </div>
    <div class="form-field">
      <label>性别:</label>
      <select name="gender_1">
        <option value="">请选择</option>
        <option value="male">男</option>
        <option value="female">女</option>
      </select>
    </div>
    <button type="button" class="remove-form">删除表单</button>
  </div>
</div>

<button type="button" id="add-more-btn">添加更多表单</button>

CSS 样式（可选，用于美化） #

.form-group {
  border: 1px solid #ddd;
  padding: 20px;
  margin-bottom: 15px;
  border-radius: 8px;
}

.form-field {
  margin-bottom: 12px;
}

.form-field label {
  display: inline-block;
  width: 80px;
  margin-right: 10px;
}

#add-more-btn {
  margin-top: 10px;
  padding: 8px 16px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.remove-form {
  margin-top: 10px;
  padding: 6px 12px;
  background-color: #dc3545;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

JavaScript 逻辑 #

// 获取元素
const addBtn = document.getElementById('add-more-btn');
const formContainer = document.getElementById('form-container');

// 监听添加按钮点击事件
addBtn.addEventListener('click', function() {
  // 获取第一个表单模板
  const originalForm = document.querySelector('.form-group');
  // 克隆表单（true表示深度克隆，包含所有子元素）
  const newForm = originalForm.cloneNode(true);
  
  // 计算当前表单数量，生成新的索引
  const formCount = formContainer.querySelectorAll('.form-group').length + 1;
  
  // 更新表单标题
  newForm.querySelector('h3').textContent = `表单 #${formCount}`;
  
  // 清空新表单的所有输入值
  const inputs = newForm.querySelectorAll('input, select');
  inputs.forEach(input => {
    input.value = '';
    // 更新name属性，保证唯一性（方便后端接收）
    input.name = input.name.replace(/_\d+$/, `_${formCount}`);
  });
  
  // 为新表单的删除按钮绑定事件
  const removeBtn = newForm.querySelector('.remove-form');
  removeBtn.addEventListener('click', function() {
    newForm.remove();
    // 删除后重新编号表单标题
    reindexForms();
  });
  
  // 将新表单追加到容器中
  formContainer.appendChild(newForm);
});

// 初始绑定删除按钮事件
document.querySelector('.remove-form').addEventListener('click', function() {
  this.parentElement.remove();
  reindexForms();
});

// 重新编号表单的辅助函数
function reindexForms() {
  const forms = formContainer.querySelectorAll('.form-group');
  forms.forEach((form, index) => {
    form.querySelector('h3').textContent = `表单 #${index + 1}`;
    // 同时更新所有字段的name属性索引
    const inputs = form.querySelectorAll('input, select');
    inputs.forEach(input => {
      input.name = input.name.replace(/_\d+$/, `_${index + 1}`);
    });
  });
}

关键实现说明 #

• 使用cloneNode(true)深度克隆原始表单，确保所有字段、样式和结构完全一致
• 克隆后自动清空新表单的输入值，避免继承原表单内容
• 动态更新表单的name属性，添加索引后缀（如name_1、name_2），确保后端能区分不同表单的数据
• 支持删除单个表单，删除后自动重新编号所有表单的标题和字段名

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