如何限制输入框创建数量并为每个输入框分配唯一ID？

原始代码 #

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<button id="addScnt" style='margin-bottom: 15px;'>Add (limit 5)</button>

<div id="p_scents">
  <p>
    <label for="p_scnts"><input type="text" id="p_scnt" class="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" /></label>
  </p>
</div>

CSS #

input {
  padding: 5px;
  border: 3px solid #999;
  border-radius: 8px;
  margin-bottom: 5px;
}

JavaScript #

$(function() {
  var scntDiv = $('#p_scents');
  var i = $('#p_scents p').size() + 1;

  $('#addScnt').live('click', function() {
    $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i + '" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
    i++;
    return false;
  });

  $('#remScnt').live('click', function() {
    if (i > 2) {
      $(this).parents('p').remove();
      i--;
    }
    return false;
  });
});

需求 #

• 最多允许创建5个输入框（含初始的1个）
• 每个输入框分配唯一ID，格式如#myid1、#myid2……#myid5

尝试的代码（异常） #

$(function() {
    var scntDiv = $('#p_scents');
    var i = $('#p_scents p').size() + 1;

    $('#addScnt').on('click', function() {
        if (i <= 4) { // 5 inputs limit
            $('<p><label for=&quot;p_scnts&quot;><input type=&quot;text&quot; id=&quot;p_scnt_' + i + '&quot; class=&quot;p_scnt&quot; size=&quot;20&quot; name=&quot;p_scnt_' + i +'&quot; value=&quot;&quot; placeholder=&quot;Input Value&quot; /></label> <a href=&quot;#&quot; class=&quot;remScnt&quot;>Remove</a></p>').appendTo(scntDiv);
            i++;
        }
        return false;
    });

    $(document).on('click', '.remScnt', function() { 
        if (i > 2) {
            $(this).parents('p').remove();
            i--;
        }
        return false;
    });
}); 

修正方案 #

问题出在计数逻辑偏差、初始ID未统一格式，以及字符串转义错误。以下是修正后的完整代码：

修正后的HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<button id="addScnt" style='margin-bottom: 15px;'>Add (limit 5)</button>

<div id="p_scents">
  <p>
    <label for="myid1"><input type="text" id="myid1" class="p_scnt" size="20" name="p_scnt_1" value="" placeholder="Input Value" /></label>
  </p>
</div>

修正后的JavaScript #

$(function() {
    var scntDiv = $('#p_scents');
    // 初始已有1个输入框，从2开始计数
    var i = 2;
    // 最大允许的输入框数量
    var maxCount = 5;

    $('#addScnt').on('click', function() {
        // 获取当前真实的输入框数量
        var currentCount = scntDiv.find('p').length;
        if (currentCount < maxCount) {
            // 用模板字符串构建元素，统一ID格式
            var newInput = $(`<p>
                <label for="myid${i}">
                    <input type="text" id="myid${i}" class="p_scnt" size="20" name="p_scnt_${i}" value="" placeholder="Input Value" />
                </label> 
                <a href="#" class="remScnt">Remove</a>
            </p>`);
            newInput.appendTo(scntDiv);
            i++;
        }
        return false;
    });

    $(document).on('click', '.remScnt', function() { 
        var currentCount = scntDiv.find('p').length;
        // 至少保留1个输入框
        if (currentCount > 1) {
            $(this).closest('p').remove();
            // 重新计算计数，避免ID重复
            i = scntDiv.find('p').length + 1;
        }
        return false;
    });
});

修正说明 #

1. 统一ID格式：初始输入框ID改为myid1，后续生成的ID依次为myid2至myid5，匹配需求。
2. 准确计数逻辑：每次操作前通过DOM查询获取真实的输入框数量，避免依赖变量i的偏差；移除后重新计算i，确保后续ID唯一。
3. 修复字符串转义：使用模板字符串简化元素构建，避免转义符错误。
4. 事件委托优化：用closest('p')替代parents('p')，更精准定位父元素。

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