优化JavaScript待办事项删除功能：动态元素事件处理与数据同步指南

// 示例数据结构
let lists = [
    { id: '1678888888888', taskInput: 'Buy groceries', taskAssign: 'Me', taskDescription: 'Milk, Eggs', taskDueDate: '2023-12-31', taskCompleted: false },
    { id: '1678888888889', taskInput: 'Finish report', taskAssign: 'Team', taskDescription: 'Q4 Report', taskDueDate: '2023-12-25', taskCompleted: false }
];

const listsContainer = document.querySelector('[data-lists]'); // 假设这是所有列表项的父容器

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

        // 如果需要，可以添加一个类来表示选中状态
        // if (list.id === selectedListId) {
        //     listElement.classList.add('activeList');
        // }

        // 显示待办事项内容
        listElement.innerHTML = `
            <span>${list.taskInput}</span>
            <button class="delete-btn" data-delete-id="${list.id}">X</button>
        `;
        listsContainer.appendChild(listElement);
    });
}

function clearElement(element) {
    while (element.firstChild) {
        element.removeChild(element.firstChild);
    }
}

// 假设 saveAndRender() 函数负责保存数据到本地存储并调用 render()
function saveAndRender() {
    // 例如：localStorage.setItem('lists', JSON.stringify(lists));
    render();
}

listsContainer.addEventListener('click', e => {
    // 检查被点击的元素是否是删除按钮
    if (e.target.classList.contains('delete-btn')) {
        const idToDelete = e.target.dataset.deleteId;
        if (idToDelete) {
            // 从数据数组中过滤掉要删除的项
            lists = lists.filter(list => list.id !== idToDelete);
            saveAndRender(); // 保存并重新渲染UI
        }
    }
});

// 移除或修改此段代码，因为它可能与新的事件委托方案冲突
// deleteListButton.addEventListener('click', e => {
//     lists = lists.filter(list => list.id !== selectedListId)
//     selectedListId = null
//     saveAndRender()
// })

// 假设这是你的初始数据
let lists = JSON.parse(localStorage.getItem('lists')) || []; // 从本地存储加载或初始化为空数组
let selectedListId = localStorage.getItem('selectedListId'); // 同样可以从本地存储加载

const listsContainer = document.querySelector('[data-lists]');
const newListForm = document.querySelector('[data-new-list-form]'); // 假设有新增表单
const tasknameInput = document.getElementById('taskname'); // 假设有任务名称输入框

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

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

// 核心函数：保存数据并重新渲染UI
function saveAndRender() {
    localStorage.setItem('lists', JSON.stringify(lists));
    localStorage.setItem('selectedListId', selectedListId); // 如果selectedListId仍有用途，则保存
    render();
}

// 渲染UI的函数
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');

        // 根据需要添加activeList类
        if (list.id === selectedListId) {
            listElement.classList.add('activeList');
        }

        listElement.innerHTML = `
            <span>${list.taskInput}</span>
            <button class="delete-btn" data-delete-id="${list.id}">X</button>
        `;
        listsContainer.appendChild(listElement);
    });
}

// 事件监听器：处理待办事项的删除
listsContainer.addEventListener('click', e => {
    // 如果点击的是删除按钮
    if (e.target.classList.contains('delete-btn')) {
        const idToDelete = e.target.dataset.deleteId;
        if (idToDelete) {
            lists = lists.filter(list => list.id !== idToDelete);
            // 如果删除的是当前选中的列表，则清空选中状态
            if (selectedListId === idToDelete) {
                selectedListId = null;
            }
            saveAndRender();
        }
    }
    // 如果点击的是列表项本身（用于选中）
    else if (e.target.tagName.toLowerCase() === 'li' && e.target.dataset.listID) {
        selectedListId = e.target.dataset.listID;
        saveAndRender(); // 重新渲染以更新选中状态
    }
});

// 事件监听器：处理新增待办事项
if (newListForm) { // 确保表单存在
    newListForm.addEventListener('submit', e => {
        e.preventDefault();
        const taskInput = tasknameInput.value; // 获取任务名称
        if (taskInput === null || taskInput === '') return;

        const list = createList(taskInput, 'Default Assignee', 'Default Description', 'No Due Date'); // 简化参数
        lists.push(list);
        tasknameInput.value = ''; // 清空输入框
        saveAndRender();
    });
}

// 初始化渲染
render();