使用 javascript 创建一个执行列表（如何通过单击列表元素来删除该函数？）

【问题标题】：Creating a do list using javascript ( How to delete the function by just clicking on the list element?)使用 javascript 创建一个执行列表（如何通过单击列表元素来删除该函数？）
【发布时间】：2022-01-02 16:19:20
【问题描述】：

我打算创建一个简单的待办事项列表来教我的学生（我对 JS 也很陌生）

function createlist() {
  let x = document.forms["todo"]["thing"].value;
  var head = document.createElement("li");
  head.innerText = x;
  head.style.color = "red";
  head.setAttribute("id", "listid");
  document.getElementById("myUL").appendChild(head);
}

我希望在单击列表元素时删除它们！如何动态创建事件并将其链接到创建的列表元素？

【问题讨论】：

标签： javascript html dom

【解决方案1】：

附加a single event listener to the list element 以在列表元素“冒泡”DOM 时从列表元素中捕获事件，然后将一个类添加到单击的项目，将其显示设置为none。

const list = document.querySelector('ul');
list.addEventListener('click', handleClick, false);

function handleClick(e) {
  e.target.classList.add('deleted');
}

.deleted { display: none; }
li:hover { cursor: pointer; color: blue; }

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>

【讨论】：