如何用JavaScript动态增删输入框并同步调整ID序列？

需求明确：实现输入框的动态增删，所有输入框及关联元素拥有唯一ID，删除元素后剩余元素ID自动调整为连续的1、2、3…格式，比如初始1=面包、2=牛奶、3=奶酪，删除牛奶后添加苹果，结果应为1=面包、2=奶酪、3=苹果。

原代码的核心问题 #

1. 数据结构错误：groceryItems存储的是元素的innerHTML字符串，而非DOM元素本身，导致后续无法直接修改元素的ID等属性
2. 删除逻辑错误：remove函数中使用groceryItems.splice(el,1)，但el是DOM元素，不是数组索引，无法正确删除数组中的对应项
3. ID更新无效：updateIDs函数仅修改了id变量的值，没有实际更新DOM元素的ID、标签的for属性以及按钮文本等关联内容

修正后的纯JavaScript实现代码 #

let groceryList = document.getElementById("groceryList");
// 存储DOM元素而非HTML字符串
let groceryItems = [];

/* 批量设置元素属性 */
function setAttributes(el, attrs){
    for(var key in attrs) {
        el.setAttribute(key, attrs[key]);
    }
}

/* 创建单个商品项的DOM结构 */
function createGroceryItem(itemIndex) {
    const idNum = itemIndex + 1;
    const itemId = `item${idNum}`;

    // 创建fieldset容器
    const groceryItem = document.createElement("fieldset");
    groceryItem.id = itemId;

    // 文本输入标签
    const inputLabel = document.createElement("label");
    inputLabel.textContent = `Item ${idNum}`;
    inputLabel.setAttribute("for", `text${itemId}`);
    groceryItem.appendChild(inputLabel);

    // 文本输入框
    const textInput = document.createElement("input");
    textInput.setAttribute("type", "text");
    textInput.style.display = "block";
    textInput.id = `text${itemId}`;
    groceryItem.appendChild(textInput);

    // 数量标签
    const numberLabel = document.createElement("label");
    numberLabel.textContent = "Amount";
    numberLabel.setAttribute("for", `num${itemId}`);
    groceryItem.appendChild(numberLabel);

    // 数量输入框
    const numInput = document.createElement("input");
    setAttributes(numInput, {"type": "number", "min": "0", "max": "100", "value": "1"});
    numInput.style.display = "block";
    numInput.id = `num${itemId}`;
    groceryItem.appendChild(numInput);

    // 删除按钮
    const removeItem = document.createElement("button");
    removeItem.textContent = `Remove Item ${idNum}`;
    removeItem.id = `remove${itemId}`;
    removeItem.setAttribute("type","button");
    removeItem.addEventListener("click", () => removeItemHandler(groceryItem));
    groceryItem.appendChild(removeItem);

    return groceryItem;
}

/* 添加商品项 */
function addItem(){
    const newItem = createGroceryItem(groceryItems.length);
    groceryItems.push(newItem);
    groceryList.appendChild(newItem);
}

/* 删除商品项 */
function removeItemHandler(el){
    // 找到元素在数组中的索引
    const index = groceryItems.indexOf(el);
    if(index !== -1){
        groceryItems.splice(index, 1);
        groceryList.removeChild(el);
        // 删除后更新所有剩余元素的ID
        updateAllIDs();
    }
}

/* 更新所有元素的ID及关联属性 */
function updateAllIDs(){
    groceryItems.forEach((item, index) => {
        const idNum = index + 1;
        const newItemId = `item${idNum}`;

        // 更新fieldset的ID
        item.id = newItemId;

        // 更新文本标签的for属性和文本
        const textLabel = item.querySelector("label[for^='text']");
        textLabel.textContent = `Item ${idNum}`;
        textLabel.setAttribute("for", `text${newItemId}`);

        // 更新文本输入框的ID
        const textInput = item.querySelector("input[id^='text']");
        textInput.id = `text${newItemId}`;

        // 更新数量标签的for属性
        const numLabel = item.querySelector("label[for^='num']");
        numLabel.setAttribute("for", `num${newItemId}`);

        // 更新数量输入框的ID
        const numInput = item.querySelector("input[id^='num']");
        numInput.id = `num${newItemId}`;

        // 更新删除按钮的文本和ID
        const removeBtn = item.querySelector("button[id^='remove']");
        removeBtn.textContent = `Remove Item ${idNum}`;
        removeBtn.id = `remove${newItemId}`;
    });
}

关键修改点说明 #

1. 数据结构调整：groceryItems改为存储DOM元素，方便后续直接操作元素属性
2. 拆分创建逻辑：将单个商品项的DOM创建封装为createGroceryItem函数，传入索引生成正确的ID，避免重复
3. 删除逻辑修复：通过indexOf找到元素在数组中的索引，再执行splice删除，确保数组和DOM同步
4. 完整ID更新：updateAllIDs遍历所有剩余元素，逐一更新fieldset的ID、标签的for属性、输入框的ID以及删除按钮的文本和ID，保证所有关联元素的ID保持连续且唯一
5. 事件绑定优化：使用addEventListener绑定点击事件，避免内联onclick的耦合问题

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