JavaScript待办应用中动态列表删除功能的正确实现与优化

function createList(taskInput, taskAssign, taskDescription, taskDueDate) {
    return { 
        id: Date.now().toString(), // 确保每个列表项有唯一的ID
        taskInput: taskInput,
        taskAssign: taskAssign,
        taskDescription: taskDescription,
        taskDueDate: taskDueDate,
        taskCompleted: false
    } 
}

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');

        if (list.id === selectedListId) {
            listElement.classList.add('activeList'); // 激活样式
        }

        // 为每个列表项添加其内容和删除按钮
        listElement.innerHTML = `
            <span>${list.taskInput}</span>
            <button class="delete-task-btn" data-list-id="${list.id}">删除</button>
        `;
        // 可以根据需要添加其他任务详情，如 assignInput, descriptionInput, dueDateInput

        listsContainer.appendChild(listElement);
    });
    // ... 其他渲染逻辑（例如，如果selectedListId为null，清空详情面板）
    // 如果有其他需要根据lists数据渲染的区域，也在此处更新
}

// 假设 clearElement 函数存在，用于清空容器内容
function clearElement(element) {
    while (element.firstChild) {
        element.removeChild(element.firstChild);
    }
}

// 假设 listsContainer 已经通过 document.querySelector('[data-lists]') 获取
// 移除原有的 deleteListButton.addEventListener('click', ...)
// 新增事件委托监听器
listsContainer.addEventListener('click', e => {
    // 检查被点击的元素是否是我们的删除按钮
    if (e.target.classList.contains('delete-task-btn')) {
        const listIdToDelete = e.target.dataset.listId; // 获取要删除的列表ID

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

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

        // 保存更新后的数据并重新渲染UI
        saveAndRender();
    }
    // 注意：原有的 mouseover 监听器如果仅用于设置 selectedListId 以便高亮显示，
    // 可以保留。但删除操作不再依赖它。
    // 如果 mouseover 导致了不必要的 saveAndRender，可以优化为只在 click 时才调用。
});

// 原有的 mouseover 监听器可以保持不变，用于列表项的选中/高亮功能
listsContainer.addEventListener('mouseover', e => {
    if (e.target.tagName.toLowerCase() === 'li' && e.target.dataset.listID) {
        selectedListId = e.target.dataset.listID;
        // 仅在 selectedListId 实际改变时才调用 saveAndRender，避免不必要的重绘
        // 或者只更新样式而不调用完整的 saveAndRender
        saveAndRender(); // 假设 saveAndRender 会处理选中状态的样式更新
    }
});