如何点击按钮一键删除localStorage存储的待办清单对应DOM列表条目

• 你调用list.children.remove()报错，是因为list.children返回的是HTMLCollection类数组集合，只有单个DOM元素才有remove()方法，集合本身没有这个方法
• 你写的document.getElementsByClassName("newList").innerHTML = ''无效，是因为getElementsByClassName返回的也是元素集合，不能直接给集合设置innerHTML属性
• 另外你清空localStorage后没有重置内存中的storedItems数组，也没有更新底部的任务计数，会导致后续添加新任务时出现数据异常
• 还有一点需要注意：你的Clear按钮放在form标签内部，默认type是submit，点击会触发表单默认提交行为导致页面刷新，需要主动阻止

直接修改containerList.addEventListener中clears分支的代码即可：

if (e.target.classList.contains('clears')){
    // 阻止表单默认提交，避免页面刷新
    e.preventDefault()
    // 清空localStorage存储的任务
    window.localStorage.removeItem('tasks');
    // 直接清空任务列表容器的内容，一次性删除所有li节点
    list.innerHTML = ''
    // 重置内存中的任务数组
    storedItems = []
    // 更新底部任务计数
    document.getElementById("numberItems").innerHTML = `${storedItems.length} item(s) `
    console.log('clear button has been pushed')
}

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