17370845950

2. 实现事件委托进行删除

现在，我们可以使用事件委托在listsContainer上监听点击事件。

// 假设 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
        }
    }
});

在这个新的事件监听器中：

• 我们监听了listsContainer的click事件。
• 在事件处理函数内部，通过e.target.classList.contains('delete-btn')判断实际被点击的元素是否是我们定义的删除按钮。
• 如果确实是删除按钮，我们通过e.target.dataset.deleteId获取到待删除项的唯一ID。
• 然后，我们更新lists数组，将其过滤掉匹配ID的项。
• 最后，调用saveAndRender()来持久化数据（如果需要）并重新渲染整个列表。

3. 移除旧的、不必要的事件监听器

如果你的代码中存在一个全局的deleteListButton监听器，并且其逻辑依赖于selectedListId，那么在采用了事件委托方案后，这个全局监听器就变得多余且可能导致冲突，应该将其移除或修改。

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

同样，mouseover事件监听器用于设置selectedListId的逻辑，在新的删除机制下也可能不再需要，因为删除操作现在直接通过按钮的data-delete-id来识别。

完整示例代码（核心部分）

// 假设这是你的初始数据
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 = `
            ${list.taskInput}