点击按钮删除列表项功能失效，请求技术协助

我来帮你排查一下代码里的问题，这几个关键点导致了删除功能失效：

问题1：oldEl是HTML集合而非单个元素 #

你一开始定义的oldEl = document.getElementsByTagName('li');返回的是一个HTMLCollection（类数组的元素集合），而不是单个<li>元素。集合本身没有parentNode属性，所以oldEl.parentNode.removeChild(oldEl)这句代码会直接报错。

问题2：removeItem函数未接收事件参数 #

你的removeItem函数里用了e.preventDefault()，但函数定义时没有传入e参数，执行时会抛出ReferenceError: e is not defined，导致整个函数无法正常运行。

问题3：未处理动态更新的列表项 #

页面加载时获取的oldEl集合虽然是“动态”的，但直接操作集合本身不对，应该在删除时重新获取当前的列表项，确保包含新增的元素。

修正后的代码（单删除按钮删除最后/第一个项） #

如果你的需求是点击页面上的单个删除按钮，删除最后一个（或第一个）列表项，可以这样修改：

let elList, addLink, counter, removeLink;
elList = document.getElementById('list');
addLink = document.querySelector('a');
counter = document.getElementById('counter');
removeLink = document.getElementById('delete');

function addItem(e) {
  e.preventDefault();
  const newEl = document.createElement('li');
  const newText = document.createTextNode('New list item');
  newEl.appendChild(newText);
  elList.appendChild(newEl);
}

function updateCount() {
  const listItems = elList.getElementsByTagName('li').length;
  counter.innerHTML = listItems;
}

// 修正后的删除函数
function removeItem(e) {
  e.preventDefault(); // 现在e有正确传入
  const listItems = elList.getElementsByTagName('li');
  // 先检查有没有可删除的项
  if (listItems.length > 0) {
    // 删除最后一个列表项，换成listItems[0]则删除第一个
    elList.removeChild(listItems[listItems.length - 1]);
    // 手动更新计数（因为DOMNodeRemoved事件默认不触发，可选）
    updateCount();
  }
}

addLink.addEventListener('click', addItem, false);
elList.addEventListener('DOMNodeInserted', updateCount, false);
removeLink.addEventListener('click', removeItem, false);

进阶：给每个列表项添加独立删除按钮 #

如果你的需求是每个列表项都有自己的删除按钮，点击就删除对应项，可以修改addItem函数，动态给新项添加删除按钮：

function addItem(e) {
  e.preventDefault();
  const newEl = document.createElement('li');
  const newText = document.createTextNode('New list item');
  
  // 创建删除按钮
  const deleteBtn = document.createElement('button');
  deleteBtn.textContent = 'Delete';
  // 给按钮绑定删除事件
  deleteBtn.addEventListener('click', function() {
    elList.removeChild(newEl);
    updateCount(); // 删除后立即更新计数
  });

  newEl.appendChild(newText);
  newEl.appendChild(deleteBtn);
  elList.appendChild(newEl);
}

这样每个新增的列表项都会自带删除按钮，点击即可删除自身，逻辑更清晰。

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