掌握JavaScript动态元素事件绑定：从直接绑定到事件委托

// ... (之前的代码) ...

// 获取所有列表项
const listItems = document.querySelectorAll('.todo-item');

// 尝试为所有列表项绑定点击事件，使其点击后变色
for(let li of listItems) {
    li.addEventListener('click', () => {
        console.log('LI CMD');
        li.classList.toggle('todo-item-complete');
    });
}

function createLi(inputText) {
    const li = document.createElement('li');
    li.classList.add('todo-item');

    const delBtn = document.createElement('button');
    delBtn.setAttribute('id', 'delete-li');
    const btnIcon = document.createElement('i');
    btnIcon.classList.add('fa-solid', 'fa-xmark');
    delBtn.appendChild(btnIcon);

    const liSpan = document.createElement('span');
    liSpan.innerText = inputText;

    li.appendChild(liSpan);
    li.appendChild(delBtn);

    // 在元素创建时直接绑定点击事件
    li.addEventListener('click', () => {
        console.log('LI clicked to toggle completion');
        li.classList.toggle('todo-item-complete');
    });

    // 为删除按钮也绑定事件 (如果需要)
    delBtn.addEventListener('click', (event) => {
        event.stopPropagation(); // 阻止事件冒泡到li，避免li也被点击
        console.log('Delete button clicked');
        li.remove(); // 移除当前列表项
    });

    return li;
}

// app.js (优化后的完整代码)

const todoUl = document.querySelector('.todo-area');
const input = document.querySelector('#todo');
const addBtn = document.querySelector('#submit');

function createLi(inputText) {
    const li = document.createElement('li');
    li.classList.add('todo-item');

    const delBtn = document.createElement('button');
    delBtn.classList.add('delete-li'); // 建议使用类名而不是ID，因为ID应该是唯一的
    const btnIcon = document.createElement('i');
    btnIcon.classList.add('fa-solid', 'fa-xmark');
    delBtn.appendChild(btnIcon);

    const liSpan = document.createElement('span');
    liSpan.innerText = inputText;

    li.appendChild(liSpan);
    li.appendChild(delBtn);

    return li;
}

addBtn.addEventListener('click', () => {
    let todoText = input.value.trim(); // 使用trim()去除空白
    if (todoText !== "") { 
        let newLi = createLi(todoText);
        todoUl.appendChild(newLi);
        input.value = ''; // 重置输入框
    }
});

// 使用事件委托处理所有动态列表项的点击事件
todoUl.addEventListener('click', (event) => {
    const target = event.target;

    // 1. 处理列表项点击（完成/未完成切换）
    // 检查点击的是否是todo-item本身或其内部的span
    if (target.classList.contains('todo-item') || target.parentElement.classList.contains('todo-item')) {
        // 找到实际的列表项元素
        const listItem = target.classList.contains('todo-item') ? target : target.parentElement;
        listItem.classList.toggle('todo-item-complete');
        console.log('List item toggled completion:', listItem.textContent);
    }

    // 2. 处理删除按钮点击
    // 检查点击的是否是删除按钮或其内部的图标
    if (target.classList.contains('delete-li') || target.parentElement.classList.contains('delete-li')) {
        // 找到删除按钮的父元素（即列表项）并移除
        const deleteButton = target.classList.contains('delete-li') ? target : target.parentElement;
        const listItemToRemove = deleteButton.closest('.todo-item'); // 查找最近的.todo-item父元素
        if (listItemToRemove) {
            listItemToRemove.remove();
            console.log('List item removed:', listItemToRemove.textContent);
        }
    }
});

/* ... (其他CSS) ... */

/* 将 #delete-li 改为 .delete-li */
.delete-li {
    border: none;
    background-color: #4eb9cd;
    margin-right:2%;
    transition: background-color 0.5s;
}

.todo-item:hover .delete-li { /* 确保hover样式仍然生效 */
    background-color: #76cfe0;
}