使用JavaScript创建待办列表：如何实现点击列表元素触发删除功能

有两种常用的实现方式，你可以根据需求选择：

方案1：创建元素时直接绑定点击事件 #

这个方式逻辑最直观，适合初学者快速理解，你只需要在创建li元素的逻辑里，新增一行事件绑定代码即可。
另外注意你现有代码里所有动态生成的li都设置了相同的id="listid"，HTML规定id必须全局唯一，重复id会导致后续DOM操作异常，建议删除这行或者换成class属性。
修改后的完整createlist代码如下：

function createlist() {
  let x = document.forms["todo"]["thing"].value;
  // 加个非空判断，避免添加空待办
  if (!x.trim()) return;
  var head = document.createElement("li");
  head.innerText = x;
  head.style.color = "red";
  // 删掉重复id的设置，或者改成head.className = "list-item"
  // head.setAttribute("id", "listid");
  // 绑定点击删除事件
  head.addEventListener('click', function() {
    // 点击时删除当前被点击的元素
    this.remove();
  })
  document.getElementById("myUL").appendChild(head);
}

方案2：事件委托（更推荐，性能更好） #

如果你的待办列表可能会有大量条目，给每个li单独绑定事件会占用额外内存，这种情况可以直接给父元素#myUL绑定事件，利用事件冒泡机制统一处理所有子元素的点击，不管是现有还是后续动态新增的li都能生效。
你不需要修改原有createlist的逻辑，只需要额外加一段全局绑定代码即可：

// 直接给父容器绑定点击事件
document.getElementById('myUL').addEventListener('click', function(e) {
  // 判断当前点击的元素是不是li标签
  if (e.target.tagName === 'LI') {
    // 删除被点击的li
    e.target.remove();
  }
})

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