如何用JavaScript动态更新Div编号，删除后保持连续序号

原代码的问题在于删除输入框后仅调整了全局计数器，未同步更新剩余输入框的编号、ID和Name属性，导致编号无法保持连续。以下是修复后的完整代码：

HTML 代码 #

<div class="form-group text-start" id="formDriverInputs">
  <div id="inputDriverBlock0" class="input-driver-block">
    <div class="inputContainer">
      <div class="input-group-prepend">
        <div class="input-group-text">1</div>                            
        <input type="text" id="driverIdInput0" name="driverNameInput0" placeholder="Введите иин">
        <img src="https://image.emojipng.com/610/1872610.jpg" alt="添加" class="form__img-add" onclick="addInputIIN()">
      </div>
    </div>
  </div>
</div>

CSS 代码 #

.form__img-add{
    width:32px;
    cursor: pointer;
}
.inputContainer {
    display: flex;
    align-items: start;
    gap: 8px;
    margin-bottom: 8px;
}

JavaScript 代码 #

// 获取输入框容器
const driverInputsContainer = document.getElementById('formDriverInputs');

function addInputIIN() {
    // 当前已有的输入框数量
    const currentCount = driverInputsContainer.querySelectorAll('.input-driver-block').length;
    if (currentCount < 5) {
        const newBlock = document.createElement('div');
        const blockId = `inputDriverBlock${currentCount}`;
        const inputId = `driverIdInput${currentCount}`;
        const inputName = `driverNameInput${currentCount}`;
        
        newBlock.className = 'input-driver-block';
        newBlock.id = blockId;
        newBlock.innerHTML = `
            <div class="inputContainer">
                <div class="input-group-prepend">
                    <div class="input-group-text">${currentCount + 1}</div>
                </div>
                <input type="text" class="form-control form__iin mb-3 position-relative" 
                       id="${inputId}" name="${inputName}" 
                       aria-describedby="driver" placeholder="Введите иин">
                <img src="https://w7.pngwing.com/pngs/185/104/png-transparent-emblem-icon-icons-matt-minus-symbol.png" 
                     alt="删除" class="form__img-add" onclick="delInputIIN(event)">
            </div>
        `;
        driverInputsContainer.appendChild(newBlock);
    } else {
        const toastBody = document.querySelector('.toast-body');
        toastBody.innerHTML = 'Не может быть больше 5 водителей на 1 машину';
        BsAlert.show();
    }
}

function delInputIIN(event) {
    // 获取要删除的输入框块
    const targetBlock = event.target.closest('.input-driver-block');
    if (targetBlock) {
        targetBlock.remove();
        // 重新更新所有输入框的编号、ID和Name
        updateDriverInputNumbers();
    }
}

function updateDriverInputNumbers() {
    const allBlocks = driverInputsContainer.querySelectorAll('.input-driver-block');
    allBlocks.forEach((block, index) => {
        // 更新块的ID
        block.id = `inputDriverBlock${index}`;
        // 更新编号文本
        const numberText = block.querySelector('.input-group-text');
        numberText.textContent = index + 1;
        // 更新输入框的ID和Name
        const input = block.querySelector('input');
        input.id = `driverIdInput${index}`;
        input.name = `driverNameInput${index}`;
    });
}

关键修改说明 #

• 用类名input-driver-block统一标识每个输入框容器，方便后续遍历操作
• 删除操作后调用updateDriverInputNumbers函数，遍历所有剩余输入框，逐一更新编号、ID和Name属性，确保编号从1开始连续
• 移除了依赖全局变量的计数逻辑，改为直接获取当前输入框数量，避免计数偏差
• 修复了原HTML中的语法错误，优化了元素布局的可读性
• 为删除按钮添加了event参数，通过closest方法精准定位要删除的容器，避免DOM层级变化导致的错误

内容的提问来源于stack exchange，提问作者Адиль