JS实现列表删除功能 清空列表后点击删除按钮报错如何解决

• 核心逻辑缺陷1：未做列表非空校验就直接执行删除操作。当列表内所有<li>被清空后，list.getElementsByTagName("li")返回的集合长度为0，此时listItems[listItems.length - 1] 取值为undefined，调用list.removeChild(undefined) 就会抛出参数不合法的错误。
• 核心逻辑缺陷2：禁用删除按钮的判断条件完全错误。原代码中last == listItems.length - 1 是将DOM元素和数字做对比，永远返回false，所以按钮禁用逻辑从未生效，列表清空后删除按钮仍可点击，最终触发报错。

调整删除逻辑的执行顺序，先做非空校验再执行删除，同时修正按钮禁用的判断条件即可。
修复后的完整JS代码参考：

var removeButton = document.getElementById("remove");
removeButton.addEventListener("click", removeItem);

function removeItem() {
  var list = document.getElementById("list");
  var listItems = list.getElementsByTagName("li");
  // 先校验列表是否还有可删除元素
  if (listItems.length === 0) {
    removeButton.disabled = true;
    return;
  }
  var last = listItems[listItems.length - 1];
  list.removeChild(last);
  // 删除完成后校验是否清空，同步禁用按钮
  if (listItems.length === 0) {
    removeButton.disabled = true;
  }
}

// 补充：如果有添加列表项的功能，记得在添加逻辑中重新启用删除按钮
function myfun() {
  // 此处保留你原有的添加列表项逻辑
  removeButton.disabled = false;
}

如果页面初始加载时列表就可能为空，可以在JS初始化阶段加一行长度判断，初始为空时直接禁用删除按钮，避免误触。

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