多组加减按钮复用同一函数实现输入框增删的问题排查

问题根源 #

1. 基本类型值传递导致计数失效：原代码中count1/count2是数字类型，作为参数传入函数时是值的副本，函数内修改y不会改变外部的count变量，导致新增输入框时ID重复，计数逻辑完全失效。
2. 无边界判断引发错误：删除函数直接移除最后一个子元素，当容器只剩初始输入框时继续点击减号，会尝试移除非输入框节点（比如换行符），引发DOM操作错误。

修复方案 #

通过容器自身的子元素数量来维护序号，无需单独维护count变量，同时增加删除操作的边界判断：

修复后的JavaScript代码 #

function newX(containerId) {
    const inputsContainer = document.getElementById(containerId);
    // 用容器子元素数量作为新输入框的序号
    const newIndex = inputsContainer.children.length;
    const newInput = document.createElement("input");
    newInput.type = "text";
    newInput.id = `${containerId}${newIndex}`;
    inputsContainer.appendChild(newInput);
}

function deleteX(containerId) {
    const inputsContainer = document.getElementById(containerId);
    // 至少保留1个输入框，避免删空引发异常
    if (inputsContainer.children.length > 1) {
        inputsContainer.lastChild.remove();
    }
}

function result() {
    document.getElementById('result').innerText = 
        document.getElementById('AAA-').innerHTML + 
        document.getElementById('BBB-').innerHTML;
}

修复后的HTML代码 #

<h2>Test 1</h2>
<div style="display : flex;">
  <div>
    <button onclick="newX('AAA-')">+</button>
    <button onclick="deleteX('AAA-')" style="margin-right:5px;">-</button>
  </div>
  <div id="AAA-">
    <input type="text" id="AAA-0">
  </div>
</div>
<h2>Test 2</h2>
<div style="display : flex;">
  <div>
    <button onclick="newX('BBB-')">+</button>
    <button onclick="deleteX('BBB-')" style="margin-right:5px;">-</button>
  </div>
  <div id="BBB-">
    <input type="text" id="BBB-0">
  </div>
</div>
<h2>Name of the new ids</h2>
<button onclick="result()">Show</button>
<div id="result"></div>

关键修改说明 #

• 移除冗余count变量：直接通过容器的children.length获取当前输入框数量，生成唯一ID，彻底解决计数不同步问题。
• 增加删除边界判断：确保删除操作仅在输入框数量大于1时执行，避免DOM操作错误。
• 简化函数调用：函数仅需传入容器ID，复用性更强，代码更简洁。

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