JavaScript待办列表：删除按钮无法移除列表元素问题排查

问题根源 #

1. removeItems函数仅给按钮添加remove类，未执行删除对应列表项的核心逻辑
2. 未给ulList绑定removeItems的点击事件监听
3. 存在无用变量const delBtn = document.querySelector('button');（选中的是Enter按钮，和删除按钮无关）

修复步骤 #

1. 改写removeItems函数：点击删除按钮时，定位其父元素<li>并从<ul>中移除
2. 为ulList添加removeItems的点击事件监听
3. 删除无用的delBtn变量

完整修复代码 #

JavaScript代码

const enterBtn = document.getElementById('enter');
const input = document.querySelector('input');
const ulList = document.querySelector('ul');

// 获取输入框内容长度
function inputLength() {
  return input.value.length;
}

// 为已有列表项添加删除按钮
function addDelButtonsToExistingItems() {
  const liItems = document.querySelectorAll('li');
  for (let i = 0; i < liItems.length; i++) {
    const delBtn = document.createElement('button');
    delBtn.appendChild(document.createTextNode('delete'));
    liItems[i].appendChild(delBtn);
  }
}

addDelButtonsToExistingItems();

// 添加新列表项
function addNewItem() {
  if (inputLength() > 0) {
    const newLiItem = document.createElement('li');
    newLiItem.appendChild(document.createTextNode(input.value));
    const delBtn = document.createElement('button');
    delBtn.appendChild(document.createTextNode('delete'));
    newLiItem.appendChild(delBtn);
    ulList.appendChild(newLiItem);
    input.value = '';
  }
}

// 删除列表项
function removeItems(e) {
  if (e.target.tagName === 'BUTTON') {
    // 定位按钮的父元素li并移除
    const parentLi = e.target.parentElement;
    parentLi.remove();
  }
}

// 切换完成状态
function toggleDone(e) {
  if (e.target.tagName === 'LI') {
    e.target.classList.toggle('done');
  }
}

// 回车键添加项
function addOnEnterKeyPressed(e) {
  if (e.keyCode === 13) {
    addNewItem();
  }
}

// 绑定事件监听
enterBtn.addEventListener('click', addNewItem);
input.addEventListener('keypress', addOnEnterKeyPressed);
ulList.addEventListener('click', toggleDone);
// 新增删除事件监听
ulList.addEventListener('click', removeItems);

CSS代码（无需修改）

.done{
  text-decoration: line-through;
}

HTML代码（无需修改）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Shipping List</title>
</head>

<body>
    <h1>Shopping List</h1>
    <h3>Get it done today</h3>
    <input type="text" name="input" id="input">
    <button id="enter">Enter</button>
    <ul>
        <li>NoteBook</li>
        <li>Pens</li>
        <li>Eraser</li>
        <li>CMPSC 412 book</li>
    </ul>
    <script src="script.js"></script>
</body>

</html>

补充说明 #

• 采用事件委托机制，将删除事件绑定在父元素<ul>上，确保动态新增的列表项也能触发删除功能
• 通过e.target.parentElement精准定位删除按钮所属的列表项，调用remove()直接从DOM中移除该元素

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