动态添加输入字段时索引生成异常及移除功能问题求助

针对你遇到的动态追加选项索引错误、按钮索引不匹配，以及移除选项功能不完善的问题，以下是具体修复：

核心问题分析 #

1. 选项索引计算错误：原代码直接用children().length统计选项数量，会把所有子元素（包括空白节点）算入，且未考虑移除选项后的索引断层。
2. 模板替换不精准：全局替换0和count会导致非目标位置的字符被错误替换，比如按钮文本里的字符。
3. 重复ID问题：初始模板中label和input使用相同ID，违反HTML规范，导致关联失效。
4. 移除后索引未重排：移除选项后，剩余选项的ID、name等未更新，导致索引不连续。

修复步骤及代码实现 #

1. 修正HTML模板（解决重复ID、优化占位符） #

给选项行添加统一类名option-row，替换模板中的占位符为更明确的标识（如{{qid}}表示问题ID，{{oid}}表示选项ID），同时修正label的for属性关联input：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>

<div class="container">
  <center>
    <h2>New Form</h2>
  </center>
  <div class="main_div">
  </div>
</div>
<!-- 问题模板 -->
<div class="load1 hide">
  <div class="parent_div mb-5 mt-5" id="question_{{qid}}">
    <div class="div1">
      <div class="row">
        <div class="col-6">
          <label for="question_input_{{qid}}">Question_{{qid}}</label>
          <input type="text" name="question_{{qid}}" id="question_input_{{qid}}" class="form-control">
        </div>
        <div class="col-3">
          <button id="toggle_question_{{qid}}" class="form-control remove_question mt-4" data-parent="{{qid}}">remove question</button>
        </div>
      </div>
    </div>
    <div class="div2" id="option_{{qid}}">
      <!-- 初始选项1 -->
      <div class="row option-row" id="row_{{qid}}_1">
        <div class="col-6">
          <label for="option_input_{{qid}}_1">option_{{qid}}_1</label>
          <input type="text" name="option_{{qid}}_1" id="option_input_{{qid}}_1" class="form-control">
        </div>
        <div class="col-3">
          <button id="add_option_{{qid}}" class="form-control add_option mt-4" data-parent="{{qid}}">add option</button>
        </div>
      </div>
      <!-- 初始选项2 -->
      <div class="row option-row" id="row_{{qid}}_2">
        <div class="col-6">
          <label for="option_input_{{qid}}_2">option_{{qid}}_2</label>
          <input type="text" name="option_{{qid}}_2" id="option_input_{{qid}}_2" class="form-control">
        </div>
        <div class="col-3">
          <button class="form-control remove_option mt-4" data-parent="{{qid}}" data-id="2">remove option</button>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- 选项模板 -->
<div class="load2 hide">
  <div class="row option-row" id="row_{{qid}}_{{oid}}">
    <div class="col-6">
      <label for="option_input_{{qid}}_{{oid}}">option_{{qid}}_{{oid}}</label>
      <input type="text" name="option_{{qid}}_{{oid}}" id="option_input_{{qid}}_{{oid}}" class="form-control">
    </div>
    <div class="col-3">
      <button class="form-control remove_option mt-4" data-parent="{{qid}}" data-id="{{oid}}">remove option</button>
    </div>
  </div>
</div>

2. 修正JavaScript逻辑（修复索引计算、移除重排） #

• 精准计算选项数量：通过option-row类统计有效选项
• 使用正则替换占位符，避免全局替换错误
• 移除选项后，重新遍历剩余选项更新索引

$(document).ready(function() {
  // 初始化第一个问题
  function initFirstQuestion() {
    let questionHtml = $('.load1').html();
    let firstQstn = questionHtml.replace(/{{qid}}/g, 0);
    $('.main_div').append(firstQstn);
  }
  initFirstQuestion();

  // 添加问题
  $(document).on('click', '.add_question', function() {
    let lengthQstn = $('.main_div').children().length;
    let questionHtml = $('.load1').html();
    let appendQstn = questionHtml.replace(/{{qid}}/g, lengthQstn);
    $('.main_div').append(appendQstn);
    // 将当前按钮改为移除按钮
    $(this).removeClass('add_question').addClass('remove_question').text('remove question');
  })

  // 添加选项
  $(document).on('click', '.add_option', function() {
    let qid = $(this).attr('data-parent');
    // 统计当前问题下的选项数量
    let optionCount = $("#option_" + qid).find('.option-row').length;
    let newOid = optionCount + 1;
    let optionHtml = $('.load2').html();
    let appendOpt = optionHtml.replace(/{{qid}}/g, qid).replace(/{{oid}}/g, newOid);
    $("#option_" + qid).append(appendOpt);
  })

  // 移除问题
  $(document).on('click', '.remove_question', function() {
    let qid = $(this).attr('data-parent');
    $("#question_" + qid).remove();
  })

  // 移除选项并重新索引
  $(document).on('click', '.remove_option', function() {
    let qid = $(this).attr('data-parent');
    let oid = $(this).attr('data-id');
    $("#row_" + qid + '_' + oid).remove();
    
    // 重新整理剩余选项的索引
    $("#option_" + qid).find('.option-row').each(function(index) {
      let newOid = index + 1;
      // 更新行ID
      $(this).attr('id', 'row_' + qid + '_' + newOid);
      // 更新label的for和文本
      let label = $(this).find('label');
      label.attr('for', 'option_input_' + qid + '_' + newOid).text('option_' + qid + '_' + newOid);
      // 更新input的id和name
      let input = $(this).find('input');
      input.attr('id', 'option_input_' + qid + '_' + newOid).attr('name', 'option_' + qid + '_' + newOid);
      // 更新移除按钮的data-id
      $(this).find('.remove_option').attr('data-id', newOid);
    });
  })
})

3. CSS保持不变 #

.hide {
  display: none;
}

.remove_option,
.remove_question {
  background-color: rgb(204, 177, 177);
}

.add_question,
.add_option {
  background-color: rgb(201, 233, 222);
}

关键修复点说明 #

• 占位符替换：用{{qid}}和{{oid}}作为明确占位符，避免全局替换导致的错误
• 精准计数：通过option-row类统计选项，确保计数准确
• 移除后重排：移除选项后遍历更新所有相关属性，保持索引连续
• HTML规范修正：label的for属性正确关联input ID，避免重复ID问题

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