如何同步删除DOM和数组中对应元素？列表应用开发问题求助

问题根源 #

你代码中数组删除逻辑的核心错误是：items数组存储的是用户输入的字符串内容，而原有删除逻辑中尝试用DOM节点（li元素）调用indexOf去数组中匹配索引，永远会返回-1，此时调用splice(-1, 1)只会删除数组最后一个元素，和你实际要删除的条目无法对应，因此出现删除错乱的问题。

修正代码 #

你只需替换原有JS部分代码即可解决问题：

let items = [];

const addItem = () => {
    event.preventDefault();
    const myList = document.getElementById('myList');
    const listItem = document.createElement('li');
    listItem.innerText = itemName.value + "  ";
    const removeButton = document.createElement('button');
    removeButton.innerText = "-";
    removeButton.className = "remove-btn";
    removeButton.addEventListener('click', removeItem);
    listItem.append(removeButton);
    myList.append(listItem);
    items.push(itemName.value);
    document.forms[0].reset();
}

const removeItem = () => {
    const currentLi = event.currentTarget.parentNode;
    // 实时获取当前所有列表项，匹配得到真实索引
    const allListItems = Array.from(document.querySelectorAll('#myList li'));
    const targetIndex = allListItems.indexOf(currentLi);
    // 删除对应数组元素
    items.splice(targetIndex, 1);
    // 删除DOM元素
    currentLi.remove();
}

这样修改后，页面DOM的顺序和数组顺序始终保持一致，每次删除都会先通过实际DOM排列定位要删除元素的索引，再同步删除数组中对应位置的元素，不会出现删除错位的问题。

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