JavaScript删除动态input子节点时关联元素与值未同步清除问题

三个核心逻辑错误导致拼接结果异常：

1. ID生成与遍历逻辑不匹配：用递增count生成field+数字格式的元素ID，但删除任意位置输入框时直接执行count--，既不会修改剩余元素的ID，也没有处理ID断档问题。比如新增3个输入框对应ID为field0/field1/field2，删除中间的field1后count变为2，遍历逻辑只会查找field0和field1，不仅会拿到已删除field1的残留引用，还会漏掉仍存在的field2。
2. 全局数组colorNumX从未清空：每次执行getResponse()时仅按索引覆盖数组值，已删除元素对应的旧值如果没被覆盖就会一直残留在数组中，参与最终字符串拼接。
3. 之前调用input.removeChild(li)报错是因为li是field_area（即ul#fields）的子节点，不是input的子节点，自然触发"待删除节点不是当前节点子元素"的报错。

不需要手动维护元素ID与索引的对应关系，也不需要在删除时手动清空值/修改ID，直接基于DOM现存节点做值收集即可，完整保留任意位置删除的能力：

• 生成唯一ID时count只增不减，仅保证ID唯一即可，不需要连续，删除操作里不需要递减count
• 收集输入值时，直接查询#fields下所有现存的input元素遍历取值，完全绕开ID索引匹配的问题
• 每次执行getResponse()时重新初始化存储值的数组，避免旧值残留
• 删除逻辑只需要移除对应的li节点即可，DOM删除后无引用的节点会被自动回收，不需要额外操作input属性

JS代码 #

var count = 0;
window.createinput = function() {
  var field_area = document.getElementById('fields')
  var li = document.createElement("li");
  var input = document.createElement("input");
  // count只增不减，保证ID唯一即可，无需连续
  input.id = 'field' + count;
  input.name = 'field' + count;
  input.type = "text";
  input.maxLength = 11; // 输入层面直接限制最长11位
  li.appendChild(input);
  field_area.appendChild(li);
  // 创建删除链接
  var removalLink = document.createElement('a');
  removalLink.className = "remove";
  removalLink.onclick = function() {
    // 直接移除当前li节点即可
    li.remove();
    // 删除后触发结果更新
    getResponse();
  }
  removalLink.appendChild(document.createTextNode(' X Remove'));
  li.appendChild(removalLink);
  count++;
  // 新增后触发结果更新
  getResponse();
}

// 初始化第一个输入框
document.querySelector("#createInput").click();
document.getElementById("field0").value = "1234567890X";

function getResponse() {
  var panel_date1 = document.getElementById("panelDate1").value;
  // 每次执行重新初始化数组，彻底避免旧值残留
  let colorNumX = [];
  // 直接查询当前DOM中所有存在的输入框，按页面展示顺序收集值，与ID无关
  const allInputs = document.querySelectorAll('#fields input');
  allInputs.forEach(input => {
    const val = input.value.trim();
    // 校验输入长度必须为11位，不符合可按需加提示
    if (val.length === 11) {
      colorNumX.push(val);
    }
  });

  var colorString1 = colorNumX.join(', ');
  let FPbestString1;
  if (colorString1.length > 22) {
    var FPlen1 = colorString1.length;
    var FPnewString1 = colorString1.substring(0, FPlen1 - 11) + "and " + colorString1.substring(FPlen1 - 11);
    FPbestString1 = FPnewString1.slice(0, -17) + FPnewString1.slice(-17);
  } else {
    FPbestString1 = colorString1;
  }

  var comment = "Per the number(s) " + FPbestString1 + " dated " + panel_date1 + ", this item description is redacted";
  document.getElementById("commentHere").innerHTML = comment;
}

CSS代码（原逻辑无需修改，仅微调删除按钮间距） #

.flex-container {
  display: flex;
  background-color: DodgerBlue;
}

.flex-container>div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  position: relative;
}

.close {
  position: absolute;
  right: 5px;
  top: -15px;
  opacity: 0.5;
}

.close:hover {
  opacity: 1;
  cursor: pointer;
  color: darkred;
}

#createInput:hover {
  color: navy;
  opacity: 0.8;
  cursor: pointer;
}

.remove {
  opacity: 0.5;
  margin-left: 8px;
}

.remove:hover {
  color: darkred;
  opacity: 1;
  cursor: pointer;
}

HTML代码（修复原代码中input标签语法错误，input为空标签无需闭合结束标签） #

<button id="addPanelDate" onclick="AddPanelClicked()">Add Panel Date</button>
<div class="flex-container">
  <div style="display: inline-block">
    <label>Panel Date <input id="panelDate1" onchange="getResponse()"></label>
    <ul onchange="getResponse()" id="fields">
    </ul>
    <a id="createInput" onclick="createinput()">Add Panel Number</a>
  </div>
</div>
<p id="commentHere"></p>

如果后续需要限制仅能删除最后一个输入框，不需要修改核心值收集逻辑，只需要在删除按钮的点击事件里加一行判断即可：

removalLink.onclick = function() {
  // 判断当前li是否是列表最后一个子节点，不是则直接返回不执行删除
  if (li !== field_area.lastElementChild) return;
  li.remove();
  getResponse();
}

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