JavaScript通过事件监听实现HTML列表变动后自动更新条目序号

你当前实现的序号是新增待办时直接拼接数字写死到条目文本里的，删除条目时没有逻辑去更新剩余条目的序号，自然会出现序号断层。
你之前写的修复代码无法生效有三个核心问题：

• largo是函数内部定义的普通数值变量，不是DOM元素，不存在addEventListener方法，代码运行会直接报错
• 绑定的change事件触发场景和删除操作完全无关，删除条目时不会触发该逻辑
• 函数内只有比较表达式，没有实际修改DOM内容的赋值操作，就算触发也不会改变页面显示

不要把序号硬编码到条目内容里，把原始待办文本和序号拆分存储，每次列表发生变动（新增/删除）后，遍历所有剩余条目，按当前顺序重新生成序号即可。

只需要替换原有JS代码即可，CSS和HTML不需要改动：

function newItem() {
  var node = document.createElement('li');
  var inputValue = document.getElementById('input').value.trim();

  const delButton = document.createElement('img')
  delButton.src = "https://www.upload.ee/image/14249875/delete-button.jpg"
  delButton.width = 15;
  delButton.height = 15;

  delButton.addEventListener('click', function(e){
    e.target.closest('li').remove()
    // 删除条目后触发序号更新
    updateListIndex()
  })

  // 用独立span存储待办文本，和删除按钮隔离，避免更新序号时误删按钮
  const textSpan = document.createElement('span');
  textSpan.className = 'todo-content';
  // 把原始待办内容存在自定义属性里，不掺杂序号
  textSpan.dataset.rawContent = inputValue;
  node.appendChild(textSpan)

  if (inputValue !== '') {
    document.getElementById('listForm').appendChild(node).appendChild(delButton);
    document.getElementById('input').value = '';
    // 新增条目后触发序号更新
    updateListIndex()
  }
}

// 统一更新列表序号的工具函数
function updateListIndex() {
  const allItems = document.querySelectorAll('#listForm li');
  allItems.forEach((item, index) => {
    const contentSpan = item.querySelector('.todo-content');
    // 序号从1开始计数，拼接原始待办内容
    contentSpan.textContent = `${index + 1}. ${contentSpan.dataset.rawContent} `
  })
}

注：原代码同时在JS里给add按钮绑定了click事件、又在HTML里写了onclick属性，会导致点一次按钮新增两个条目，上面的代码已经去掉了重复的绑定逻辑。

修复后不管删除列表哪个位置的条目，所有剩余条目的序号都会自动从1开始连续排序，不会再出现断层问题。

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