如何为原生JavaScript开发的待办事项应用实现删除功能

现存问题 #

• 事件触发判断逻辑缺失：删除按钮内部嵌套了font-awesome的<i>图标，点击删除区域时大概率触发事件的target是<i>元素，无法匹配到delete-button类名
• 作用域错误：todoLi是todoAdd函数内的局部变量，todoDelete函数中无法直接访问该变量，执行删除时会抛出引用错误
• 冗余代码：页面初始化时获取的deleteBtn变量无效，初始状态页面不存在删除按钮，该变量永远为null

修复后的JS代码 #

const inputBox = document.querySelector('.input')
const addBtn = document.querySelector('.input-button')
const todoMain = document.querySelector('.todo-list')
const deleteAllBtn = document.querySelector('.clear-all')
const pendingNum = document.querySelector('.pending')

//Event listeners 
inputBox.addEventListener("keyup", function(){
    let userInput = inputBox.value;
    if (userInput.trim() != 0) {
        addBtn.classList.add("active")
    } else {
        addBtn.classList.remove("active");
    }
})

addBtn.addEventListener("click", todoAdd);
todoMain.addEventListener("click", todoDelete);
deleteAllBtn.addEventListener("click", clearAllTodo);

// Functions
function todoAdd(event){
    event.preventDefault();

    const todoLi = document.createElement('li');
    todoLi.innerText = inputBox.value;
    
    const todoDeleteBtn = document.createElement('button');
    todoDeleteBtn.innerHTML = `<i class="fas fa-trash-alt"></i>`;
    todoDeleteBtn.classList.add('delete-button')
    todoLi.appendChild(todoDeleteBtn);

    todoMain.appendChild(todoLi);
    
    inputBox.value = '';
    addBtn.classList.remove("active");
    updatePendingCount();
};

function todoDelete(e){
    // 兼容点击到内部i图标的场景，向上查找最近的删除按钮
    const deleteBtn = e.target.closest('.delete-button');
    if (deleteBtn) {
        // 从当前删除按钮向上取父级的li元素
        const todoLi = deleteBtn.parentElement;
        todoMain.removeChild(todoLi);
        updatePendingCount();
    }
}

// 补充待办数量更新、清空所有功能，不需要可直接删除
function updatePendingCount() {
    pendingNum.innerText = todoMain.children.length;
}

function clearAllTodo() {
    todoMain.innerHTML = '';
    updatePendingCount();
}

如果不需要清空所有和待办数量统计功能，删掉对应的函数和事件绑定即可，核心删除功能仅需修改todoDelete函数逻辑就可以正常运行。

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