待办应用添加删除全部按钮功能失效问题排查

我帮你找出了几个导致删除全部功能失效的问题，咱们一个个来解决：

1. 致命拼写错误：lenght → length #

你代码里把判断元素数量的length拼成了lenght，这会让if(ol.lenght > 0)的判断永远不成立（因为undefined > 0是假值），删除逻辑根本没机会执行。

2. getElementsByTagName返回的是集合，不能直接调用remove() #

document.getElementsByTagName('ol')返回的是HTMLCollection（一个包含所有匹配<ol>元素的类数组对象），不是单个DOM节点，所以直接调用ol.remove()完全无效。你需要遍历这个集合，逐个删除里面的每个<ol>元素。

3. 额外拼写错误：parrentNode → parentNode #

之前你尝试的ol.parrentNode.remove()里，父节点属性的正确拼写是parentNode（少了一个e），不过其实咱们不需要通过父节点删除，直接删除元素本身更直接。

修复后的完整代码 #

function removeAll() {
  // 获取所有ol元素，得到HTMLCollection
  const olElements = document.getElementsByTagName('ol');
  // 注意：遍历动态集合要从后往前删，否则前面元素删除后会导致后面元素的索引混乱
  for (let i = olElements.length - 1; i >= 0; i--) {
    olElements[i].remove();
  }
}

document.getElementById('delete-all').addEventListener('click', removeAll);

<input type="text" id="text-field">
<input type="button" id="add-task" value="dodaj zadanie!">
<input type="button" id="delete-all" value="usuń wszystko">
<div id="to-do-list-container">
  <ul id="task-list">
    <ol>damian</ol>
  </ul>
</div>

额外小建议 #

看你的DOM结构，任务项放在<ol>里却嵌套在<ul>中，其实HTML里<ul>和<ol>都是列表容器，建议统一用一种容器+<li>节点来存放任务，结构更规范，后续操作也更清晰。比如可以改成：

<div id="to-do-list-container">
  <ul id="task-list">
    <li>damian</li>
  </ul>
</div>

对应的删除函数只需要把getElementsByTagName('ol')改成getElementsByTagName('li')即可，逻辑完全一致。

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