解决JavaScript To-Do应用中动态列表项删除的逻辑问题

// 示例数据结构
const lists = [
    { id: '1678888888888', taskInput: '学习JavaScript', taskAssign: '自己', taskDescription: '完成教程', taskDueDate: '2023-12-31', taskCompleted: false },
    { id: '1678888888889', taskInput: '构建To-Do应用', taskAssign: '自己', taskDescription: '实现删除功能', taskDueDate: '2024-01-15', taskCompleted: false }
];

// 不推荐的示例：为每个按钮单独添加监听器
function render() {
    clearElement(listsContainer);
    lists.forEach(list => {
        const listElement = document.createElement('li');
        listElement.dataset.listID = list.id;
        listElement.classList.add('list-group-item', 'shadow-lg', 'rounded');

        // ... 添加其他任务内容 ...

        const deleteButton = document.createElement('button');
        deleteButton.textContent = '删除';
        deleteButton.classList.add('btn', 'btn-danger', 'btn-sm', 'float-end');
        // 为每个按钮单独添加事件监听器
        deleteButton.addEventListener('click', () => {
            deleteListItem(list.id); // 直接调用删除函数
        });
        listElement.append(deleteButton);
        listsContainer.append(listElement);
    });
}

function deleteListItem(id) {
    lists = lists.filter(list => list.id !== id);
    saveAndRender();
}

<!-- HTML 结构示例，删除按钮带有 data-list-id 属性 -->
<ul data-lists>
    <li class="list-group-item" data-list-id="1678888888888">
        <span>学习JavaScript</span>
        <button class="btn btn-danger btn-sm float-end" data-action="delete" data-list-id="1678888888888">删除</button>
    </li>
    <!-- 更多列表项 -->
</ul>

const listsContainer = document.querySelector('[data-lists]');
let lists = []; // 假设 lists 数组已从本地存储加载或初始化
let selectedListId = null; // 用于高亮显示选中项，与删除逻辑解耦

// 辅助函数：清空元素内容
function clearElement(element) {
    while (element.firstChild) {
        element.removeChild(element.firstChild);
    }
}

// 渲染函数
function render() {
    clearElement(listsContainer); // 清空现有列表
    lists.forEach(list => {
        // 创建新的列表项容器
        const listElement = document.createElement('li');
        listElement.dataset.listID = list.id; // 存储列表项ID
        listElement.classList.add('list-group-item', 'shadow-lg', 'rounded', 'd-flex', 'justify-content-between', 'align-items-center');

        // 如果当前列表项被选中，添加activeList类
        if (list.id === selectedListId) {
            listElement.classList.add('activeList');
        }

        // 创建任务文本显示
        const taskText = document.createElement('span');
        taskText.textContent = list.taskInput; // 显示任务名称
        listElement.appendChild(taskText);

        // 创建删除按钮
        const deleteButton = document.createElement('button');
        deleteButton.textContent = '删除';
        deleteButton.classList.add('btn', 'btn-danger', 'btn-sm');
        deleteButton.dataset.action = 'delete'; // 标识这是一个删除按钮
        deleteButton.dataset.listIdToDelete = list.id; // 存储要删除的列表项ID
        listElement.appendChild(deleteButton);

        listsContainer.appendChild(listElement);
    });
    // 假设还有其他渲染逻辑，如任务详情面板等
    // renderTaskDisplay();
}

// 保存数据到本地存储并重新渲染
function saveAndRender() {
    // saveToLocalStorage(); // 假设有保存到本地存储的函数
    render();
}

// 初始渲染
render();

// 移除原有的 deleteListButton 监听器，如果它是一个全局按钮的话
// deleteListButton.removeEventListener('click', ...);

// 在父容器上使用事件委托来处理删除按钮的点击
listsContainer.addEventListener('click', e => {
    // 检查点击事件是否来源于一个带有 data-action="delete" 属性的元素
    if (e.target.dataset.action === 'delete') {
        const idToDelete = e.target.dataset.listIdToDelete; // 获取要删除的列表项ID

        if (idToDelete) {
            // 从数据数组中过滤掉匹配的项
            lists = lists.filter(list => list.id !== idToDelete);

            // 如果被删除的项是当前选中的项，则清空 selectedListId
            if (selectedListId === idToDelete) {
                selectedListId = null;
            }

            // 保存数据并重新渲染UI
            saveAndRender();
        }
    }
});

// 保持 mouseover 监听器用于更新 selectedListId，但它不再直接触发删除
listsContainer.addEventListener('mouseover', e => {
    if (e.target.tagName.toLowerCase() === 'li' && e.target.dataset.listID) {
        selectedListId = e.target.dataset.listID;
        // console.log(selectedListId); // 调试用
        saveAndRender(); // 重新渲染以更新选中项的样式
    }
});

// 示例：添加新列表项的逻辑
// 假设 newListForm, taskname, assign, description, duedate 已经定义
// newListForm.addEventListener('submit', e => {
//     e.preventDefault();
//     const taskInput = taskname.value;
//     // ... 获取其他输入 ...
//     const newList = createList(taskInput, assignInput, descriptionInput, dueDateInput);
//     lists.push(newList);
//     saveAndRender();
//     // 清空表单
// });

// 示例：创建列表项对象的函数
function createList(taskInput, taskAssign, taskDescription, taskDueDate) {
    return { 
        id: Date.now().toString(), 
        taskInput: taskInput,
        taskAssign: taskAssign,
        taskDescription: taskDescription,
        taskDueDate: taskDueDate,
        taskCompleted: false
    }; 
}