如何实现To-do列表中X按钮删除对应li元素？

问题根源 #

1. this指向错误：原代码用箭头函数绑定点击事件，箭头函数的this不会指向触发点击的按钮；同时parentElement未指定所属对象，无法定位要删除的列表项。
2. 事件绑定冗余：每次添加新任务时循环所有关闭按钮重复绑定事件，既没必要还可能引发逻辑混乱。
3. HTML语法小错误：输入框和按钮标签里的多余逗号属于无效语法，需清理。

修正后的代码 #

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">
  <title>Document</title>
  <link rel="stylesheet" href="uloha.css">
  <script src="app.js"></script>
</head>

<body>
  <div class="task" id="task">
    <h1>To-do list</h1>
    <input type="text" id="myinput" placeholder="Task">
    <button onclick="newTask()" type="button" class="button" id="button"> Add</button>
  </div>
  <ul id="list">
  </ul>
</body>

</html>

JavaScript代码

function newTask() {
  let li = document.createElement("li");
  let value = document.getElementById("myinput").value;
  let t = document.createTextNode(value);
  li.appendChild(t);
  
  if (value === '') {
    alert("You must write something!");
    return; // 为空时直接返回，避免后续无效操作
  }
  
  document.getElementById("list").appendChild(li);
  document.getElementById("myinput").value = "";

  let button = document.createElement("button");
  let text = document.createTextNode("\u00D7");
  button.className = "close";
  button.appendChild(text);
  li.appendChild(button);

  // 直接给新按钮绑定点击事件
  button.onclick = function() {
    // 获取当前按钮的父元素（li）并彻底删除
    this.parentElement.remove();
  }
}

关键修正说明 #

• 移除循环绑定事件的冗余代码，直接为新创建的关闭按钮单独绑定事件，避免重复绑定。
• 用普通函数替代箭头函数绑定事件，确保this指向触发点击的按钮，通过this.parentElement精准定位要删除的列表项，并用remove()方法彻底移除DOM节点（比设置display:none更合理，真正清理列表项）。
• 清理HTML标签中多余的逗号，修正无效语法。
• 在输入为空的判断后添加return，避免后续不必要的DOM操作。

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