jQuery实现动态添加带编号name属性与标题的输入框

直接修改你的addFields函数即可完成需求，以下是调整后的完整代码：

$(function() {

  var input = $('<input placeholder="Enter Name or Title..." type="text" required/>');
  var newFields = $();

  $('#qty').bind('blur keyup change', function() {
    var n = this.value || 0;
    if (n + 1) {
      if (n > newFields.length) {
        addFields(n);
      } else {
        removeFields(n);
      }
    }
  });

  function addFields(n) {
    for (let i = newFields.length; i < n; i++) {
      // 计算当前项的编号（从1开始）
      const itemNum = i + 1;
      // 克隆输入框并设置name属性
      var newInput = input.clone().attr('name', `subject${itemNum}`);
      // 创建带编号的标题
      const title = $(`<span>Subject ${itemNum}: </span>`);
      // 用div包裹标题和输入框，保持结构整洁
      const fieldGroup = $('<div></div>').append(title, newInput);
      // 将输入框存入newFields（用于后续移除逻辑）
      newFields = newFields.add(newInput);
      // 将整个组添加到页面容器
      fieldGroup.appendTo('#newFields');
    }
  }

  function removeFields(n) {
    var removeField = newFields.slice(n).remove();
    newFields = newFields.not(removeField);
    // 额外移除对应的标题和包裹div
    $('#newFields div').slice(n).remove();
  }
});

关键修改说明： #

• 添加带编号的name属性：在克隆输入框后，通过attr('name', \subject${itemNum}`)设置name，itemNum`是当前项的序号（从1开始）
• 添加前置编号标题：创建<span>元素承载标题文本，和输入框一起放在<div>里，保证每个输入框和标题是一组
• 优化移除逻辑：移除输入框的同时，也要删除对应的标题和包裹div，避免残留空元素
• 循环变量使用let：替换原来的全局变量i为块级作用域的let，避免循环结束后变量值异常

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