点击删除条目时如何实现数据项列表与对应DOM节点的状态同步管理？

核心思路是给每个DOM条目绑定对应存储数据的唯一标识，通过事件委托绑定删除事件，同步更新存储和DOM，具体实现如下：

1. 改造渲染逻辑，给每个条目附加唯一ID
   原来的代码只遍历了存储数据的value，现在要同时拿到存储对象的键作为唯一ID，写入DOM的自定义属性data-id，方便点击删除时定位对应数据。
2. 用事件委托绑定删除事件
   直接给父容器.bet_slip_matches绑定点击事件，不用给每个删除按钮单独绑定，适配动态渲染的条目场景，性能更好也不会出现绑定失效问题。
3. 实现删除逻辑函数
   点击删除时先通过自定义ID删除localStorage对应项，再移除对应DOM节点即可。

完整代码示例：

// 读取本地存储，增加容错处理默认空对象
let deltioItems = JSON.parse(localStorage.getItem('assoiChoices') || '{}');
let deltioContainer = document.querySelector('.bet_slip_matches');
deltioContainer.innerHTML = '';

// 遍历键值对，拿到唯一ID和对应数据
Object.entries(deltioItems).map(([itemId, item]) => {
    deltioContainer.innerHTML += `
        <div class="betslip_top_container" data-id="${itemId}">
            <div style="padding-left:5px;">
                <i class="close_but far fa-times-circle"></i>
            </div>
            <div class="b_s_matches">
                <p class="paroli_items">${item.teams}</p>
                <p class="paroli_items">${item.name}</p>
                <p class="paroli_items">${item.location} </p>
            </div>
        </div>
    `;
});

// 事件委托绑定删除事件
deltioContainer.addEventListener('click', function(e) {
    // 判断点击的是删除按钮
    if (e.target.classList.contains('close_but')) {
        // 找到当前条目的根节点
        const currentItem = e.target.closest('.betslip_top_container');
        const targetId = currentItem.dataset.id;
        removeFromLocalStorage(targetId, currentItem);
    }
});

// 删除逻辑函数
function removeFromLocalStorage(id, domElement) {
    // 更新本地存储
    const storageData = JSON.parse(localStorage.getItem('assoiChoices') || '{}');
    delete storageData[id];
    localStorage.setItem('assoiChoices', JSON.stringify(storageData));
    // 移除DOM节点
    domElement.remove();
}

如果你的assoiChoices存储的是数组而非对象，把ID替换为数组索引，或者给每个数组项新增唯一id字段即可，逻辑完全一致。

内容的提问来源于stack exchange，提问作者Bakaru