JavaScript待办列表无法删除最后一个li及清空按钮失效问题求助

你遇到的两个问题均源于showTask函数的逻辑错误：你将DOM更新操作放在了forEach循环内部，当待办数组listArr为空时，forEach不会执行，页面DOM就永远不会被清空，始终保留着之前渲染的内容。

修正方案 #

将showTask函数中拼接DOM字符串和更新页面的逻辑调整如下：

//add task
function showTask() {
    let getLocalStorage = localStorage.getItem("New Todo")
    if (getLocalStorage == null) {
        listArr = [];
    } else {
        listArr = JSON.parse(getLocalStorage);
    }
    const pendingNumb = document.querySelector('.pending');
    pendingNumb.textContent= listArr.length;
    let newLiTag = '';
    listArr.forEach((element, index) => {
        newLiTag += `<li> ${element} <span onclick="deleteTask(${index})";><i class="fas fa-trash-alt"></i></span></li>`;
    });
    // 把DOM更新、清空输入框的逻辑移到循环外，数组为空时也会执行
    todo.innerHTML = newLiTag;
    inputBox.value = '';
}

调整后逻辑执行顺序变为：先拼接所有待办的li字符串，再统一更新到页面，哪怕待办数组为空，也会把列表区域的内容设置为空字符串，完美解决最后一个待办删不掉、清空所有后页面还残留li的问题，残留li无法删除的连带问题也会同步解决。

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