JavaScript动态列表删除功能的最佳实践：数据驱动与事件委托

<li class="list-group-item" data-list-id="1678886400000">
    任务名称
    <button class="delete-button">删除</button>
</li>

const listsContainer = document.querySelector('[data-lists]'); // 父容器

listsContainer.addEventListener('click', e => {
    // 检查点击的目标是否是删除按钮或其子元素
    if (e.target.classList.contains('delete-button') || e.target.closest('.delete-button')) {
        // 找到最近的包含data-list-id的父元素（即列表项本身）
        const listItem = e.target.closest('[data-list-id]');
        if (listItem) {
            const listIdToDelete = listItem.dataset.listId;
            deleteListItem(listIdToDelete); // 调用删除函数
        }
    }
});

let lists = []; // 假设这是存储所有列表项的数组

function deleteListItem(id) {
    // 使用filter方法创建新数组，排除掉匹配ID的项
    lists = lists.filter(list => list.id !== id);
    saveAndRender(); // 保存数据并重新渲染UI
}

const listsContainer = document.querySelector('[data-lists]');

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;
        listElement.classList.add('list-group-item', 'shadow-lg', 'rounded');
        listElement.innerHTML = `
            ${list.taskInput}
            <button class="delete-button">删除</button>
        `; // 简化示例
        listsContainer.appendChild(listElement);
    });
    // 其他渲染逻辑，如更新任务计数等
}

function save() {
    // 将lists数组保存到localStorage等
    localStorage.setItem('task.lists', JSON.stringify(lists));
}

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

// 假设这是你的数据数组，从localStorage加载或初始化
let lists = JSON.parse(localStorage.getItem('task.lists')) || [];
const listsContainer = document.querySelector('[data-lists]');
const newListForm = document.querySelector('[data-new-list-form]');
const newTaskInput = document.querySelector('[data-new-task-input]');

// 初始渲染
render();

// 添加新任务的表单提交事件
newListForm.addEventListener('submit', e => {
    e.preventDefault();
    const taskName = newTaskInput.value;
    if (taskName === '' || taskName == null) return;

    const newList = createList(taskName);
    newTaskInput.value = null; // 清空输入框
    lists.push(newList);
    saveAndRender();
});

// 事件委托：处理列表容器内的点击事件
listsContainer.addEventListener('click', e => {
    // 检查是否点击了删除按钮
    if (e.target.classList.contains('delete-button')) {
        const listItem = e.target.closest('[data-list-id]');
        if (listItem) {
            const listIdToDelete = listItem.dataset.listId;
            deleteListItem(listIdToDelete);
        }
    }
});

// 创建新列表项数据对象
function createList(name) {
    return {
        id: Date.now().toString(), // 唯一ID
        taskInput: name,
        // 其他属性...
    };
}

// 删除列表项并更新UI
function deleteListItem(id) {
    lists = lists.filter(list => list.id !== id); // 从数据数组中移除
    saveAndRender(); // 保存数据并重新渲染
}

// 清空DOM元素内容
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到DOM
        listElement.classList.add('list-group-item', 'shadow-lg', 'rounded');
        listElement.innerHTML = `
            <span>${list.taskInput}</span>
            <button class="delete-button btn btn-danger btn-sm float-end">删除</button>
        `;
        listsContainer.appendChild(listElement);
    });
}

// 保存数据到localStorage
function save() {
    localStorage.setItem('task.lists', JSON.stringify(lists));
}

// 保存数据并重新渲染
function saveAndRender() {
    save();
    render();
}