jQuery动态添加表单元素：同时新增问题与答案字段需求

我来帮你搞定这个问题！你之前只实现了单独添加问题输入框，现在要改成同时添加问题和答案的话，核心是把这两个元素当成一个整体来处理，这样每次点击按钮就会新增一对，而且自动更新编号。下面是完整的实现代码：

1. HTML 结构 #

首先我们把每一组「问题+答案」放在一个容器里，方便后续克隆操作：

<div class="question-group">
  <label for="Q1">Q1:</label>
  <input type="text" id="Q1" name="Q1" placeholder="输入问题">
  <label for="A1">A1:</label>
  <input type="text" id="A1" name="A1" placeholder="输入答案">
</div>

<button id="btnAdd">添加另一个问题</button>
<button id="btnDel">删除最后一个问题</button>

2. JavaScript 逻辑 #

接下来修改你的JS代码，让它每次克隆一整组元素，并更新里面的编号：

$(document).ready(function() {
  // 初始化时禁用删除按钮（只有一组的时候不能删）
  $('#btnDel').prop('disabled', true);

  // 添加问题+答案组
  $('#btnAdd').click(function() {
    // 获取当前已有的组数，计算新的编号
    var num = $('.question-group').length;
    var newNum = num + 1;

    // 克隆第一组作为模板
    var newGroup = $('.question-group:first').clone();

    // 更新新组里的标签文本和输入框的id、name属性
    newGroup.find('label:first').text(`Q${newNum}:`).attr('for', `Q${newNum}`);
    newGroup.find('input:first').attr({
      'id': `Q${newNum}`,
      'name': `Q${newNum}`,
      'placeholder': `输入问题 ${newNum}`
    }).val(''); // 清空输入内容

    newGroup.find('label:last').text(`A${newNum}:`).attr('for', `A${newNum}`);
    newGroup.find('input:last').attr({
      'id': `A${newNum}`,
      'name': `A${newNum}`,
      'placeholder': `输入答案 ${newNum}`
    }).val(''); // 清空输入内容

    // 将新组添加到页面
    $('.question-group:last').after(newGroup);

    // 当组数大于1时，启用删除按钮
    if ($('.question-group').length > 1) {
      $('#btnDel').prop('disabled', false);
    }
  });

  // 删除最后一组问题+答案
  $('#btnDel').click(function() {
    // 只保留至少一组
    if ($('.question-group').length > 1) {
      $('.question-group:last').remove();
    }
    // 如果只剩一组，禁用删除按钮
    if ($('.question-group').length === 1) {
      $('#btnDel').prop('disabled', true);
    }
  });
});

关键细节说明 #

• 用.question-group类来包裹每一组元素，这样可以方便地统计数量和克隆
• 每次克隆后必须清空输入框的内容，不然会复制上一组的输入值
• 同步更新标签的for属性和输入框的id，保证表单的关联有效性
• 动态控制删除按钮的禁用/启用状态，避免用户删除唯一的一组

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