JavaScript动态增删里程碑后序号异常问题求助

DevOps 小满

2026-7-19

修正方案

核心思路

删除里程碑后，重新遍历所有剩余的里程碑元素，按当前DOM中的顺序更新它们的序号显示内容，彻底摆脱对初始硬编码序号的依赖。

具体实现步骤

封装一个统一的序号更新函数，负责重新计算并设置每个里程碑的序号：

function updateMilestoneNumbers() {
  // 假设所有里程碑都有统一类名.milestone-item
  const allMilestones = document.querySelectorAll('.milestone-item');
  // 按遍历顺序，给每个里程碑设置新序号（索引+1）
  allMilestones.forEach((item, index) => {
    // 假设序号显示在.milestone-number子元素中
    const numberEl = item.querySelector('.milestone-number');
    if (numberEl) {
      numberEl.textContent = index + 1;
    }
  });
}

在删除逻辑中，执行移除操作后立刻调用更新函数：

// 删除按钮的点击事件处理
function deleteMilestone(deleteBtn) {
  const targetItem = deleteBtn.closest('.milestone-item');
  if (targetItem) {
    targetItem.remove();
    // 关键步骤：删除后立即刷新所有序号
    updateMilestoneNumbers();
  }
}

添加新里程碑的逻辑里，同样调用更新函数确保序号连续：

function addNewMilestone() {
  // 创建新里程碑元素（示例结构）
  const newItem = document.createElement('div');
  newItem.className = 'milestone-item';
  newItem.innerHTML = `
    <span class="milestone-number"></span>
    <input type="text" placeholder="填写里程碑内容">
    <button class="delete-btn">删除</button>
  `;
  // 插入到容器中
  document.getElementById('rowsContainer').appendChild(newItem);
  // 添加后刷新序号
  updateMilestoneNumbers();
  // 给新删除按钮绑定事件
  newItem.querySelector('.delete-btn').addEventListener('click', function() {
    deleteMilestone(this);
  });
}