JS开发待办列表时如何清空用户输入创建的列表元素？

原代码错误原因 #

• 清空函数newFunction的逻辑完全不成立：
  1. 先调用了表单reset()方法清空了输入框，后续读取输入框值已经为空，无法匹配任何列表项
  2. 动态创建的li节点没有设置id属性，getElementById方法不可能获取到对应的列表元素

修复方法 #

直接替换原newFunction函数为以下代码即可实现清空所有已添加待办项的效果：

function newFunction() {
  // 清空输入框内容
  document.getElementById("todo").reset();
  // 清空待办列表内的所有元素
  document.getElementById("myUL").innerHTML = '';
}

可选更稳妥实现（避免innerHTML潜在的内存残留问题） #

function newFunction() {
  document.getElementById("todo").reset();
  const todoList = document.getElementById("myUL");
  // 循环移除所有子节点
  while (todoList.hasChildNodes()) {
    todoList.removeChild(todoList.firstChild);
  }
}

额外优化建议 #

原HTML代码中存在id重复问题：form标签和h1标签都使用了id="todo"，id在页面中必须唯一，建议修改h1的id避免后续DOM操作出现异常。

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