提升JavaScript待办事项应用中动态删除功能的可靠性

// 假设 lists 数组存储了所有待办事项数据
let lists = []; // 例如：[{ id: '123', taskInput: 'Learn JS', ... }]

function saveAndRender() {
    // 保存数据到 localStorage (如果适用)
    localStorage.setItem('todo.lists', JSON.stringify(lists));
    render(); // 重新渲染UI
}

function render() {
    // 清空现有列表
    clearElement(listsContainer);
    // 遍历 lists 数组，为每个事项创建DOM元素
    lists.forEach(list => {
        const listElement = document.createElement('li');
        listElement.dataset.listId = list.id; // 为每个列表项设置唯一ID
        listElement.textContent = list.taskInput; // 显示任务内容
        // ... 添加其他元素和样式
        listsContainer.appendChild(listElement);
    });
}

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

        // 创建任务文本
        const taskSpan = document.createElement('span');
        taskSpan.textContent = list.taskInput;
        listElement.appendChild(taskSpan);

        // 创建删除按钮
        const deleteBtn = document.createElement('button');
        deleteBtn.classList.add('delete-button'); // 添加一个类名以便识别
        deleteBtn.textContent = '删除';
        // deleteBtn.dataset.deleteId = list.id; // 也可以直接给删除按钮添加ID
        listElement.appendChild(deleteBtn);

        if (list.id === selectedListId) {
            listElement.classList.add('activeList');
        }
        listsContainer.appendChild(listElement);
    });
}

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

listsContainer.addEventListener('click', e => {
    // 检查被点击的元素是否是删除按钮
    if (e.target.classList.contains('delete-button')) {
        // 获取删除按钮所属的列表项的ID
        // 向上查找最近的 li 元素，获取其 data-list-id
        const listItem = e.target.closest('li[data-list-id]');
        if (listItem) {
            const idToDelete = listItem.dataset.listId;

            // 执行删除操作
            deleteListItem(idToDelete);
        }
    }
    // 其他点击事件处理逻辑（如果需要）
    if (e.target.tagName.toLowerCase() === 'li') {
        selectedListId = e.target.dataset.listId;
        saveAndRender(); // 更新选中状态并重新渲染
    }
});

function deleteListItem(id) {
    // 从数据数组中过滤掉要删除的项
    lists = lists.filter(list => list.id !== id);

    // 如果删除的是当前选中的项，则重置 selectedListId
    if (selectedListId === id) {
        selectedListId = null;
    }

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

const LOCAL_STORAGE_LIST_KEY = 'todo.lists';
const LOCAL_STORAGE_SELECTED_LIST_ID_KEY = 'todo.selectedListId';

const listsContainer = document.querySelector('[data-lists]');
const newListForm = document.querySelector('[data-new-list-form]');
const tasknameInput = document.querySelector('[data-task-name-input]'); // 假设有这个输入框
// ... 其他输入框和按钮

let lists = JSON.parse(localStorage.getItem(LOCAL_STORAGE_LIST_KEY)) || [];
let selectedListId = localStorage.getItem(LOCAL_STORAGE_SELECTED_LIST_ID_KEY);

// 初始化渲染
render();

// --- 事件监听器 ---

// 监听列表容器的点击事件（事件委托）
listsContainer.addEventListener('click', e => {
    // 处理删除按钮点击
    if (e.target.classList.contains('delete-button')) {
        const listItem = e.target.closest('li[data-list-id]');
        if (listItem) {
            const idToDelete = listItem.dataset.listId;
            deleteListItem(idToDelete);
        }
    } 
    // 处理列表项点击（选中）
    else if (e.target.tagName.toLowerCase() === 'li') {
        selectedListId = e.target.dataset.listId;
        saveAndRender();
    }
});

// 监听新列表项提交表单
newListForm.addEventListener('submit', e => {
    e.preventDefault();
    const taskInput = tasknameInput.value; // 获取任务名称
    if (taskInput == null || taskInput === '') return;

    const list = createList(taskInput, /* 其他参数 */);
    lists.push(list);
    tasknameInput.value = null; // 清空输入框
    saveAndRender();
});

// --- 辅助函数 ---

function createList(taskInput, taskAssign, taskDescription, taskDueDate) {
    return { 
        id: Date.now().toString(), 
        taskInput: taskInput,
        taskAssign: taskAssign,
        taskDescription: taskDescription,
        taskDueDate: taskDueDate,
        taskCompleted: false
    };
}

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

function save() {
    localStorage.setItem(LOCAL_STORAGE_LIST_KEY, JSON.stringify(lists));
    localStorage.setItem(LOCAL_STORAGE_SELECTED_LIST_ID_KEY, selectedListId);
}

function saveAndRender() {
    save();
    render();
}

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

        // 任务文本
        const taskSpan = document.createElement('span');
        taskSpan.textContent = list.taskInput;
        listElement.appendChild(taskSpan);

        // 删除按钮
        const deleteBtn = document.createElement('button');
        deleteBtn.classList.add('delete-button', 'btn', 'btn-sm', 'btn-danger', 'float-end'); // 示例样式
        deleteBtn.textContent = 'X';
        listElement.appendChild(deleteBtn);

        listsContainer.appendChild(listElement);
    });
}

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