购物列表删除功能异常：点击任意项均删除最后一项求排查

问题根源 #

1. 事件绑定逻辑错误：你把删除函数绑定在了包裹列表的<span class="close">上，而非每个列表项（<li>），点击列表项根本不会触发删除逻辑；且该span的class是close，但代码里用getElementById("close")查找，必然返回null。
2. 删除函数核心逻辑错误：数组myArray存的是商品字符串，你却试图查找DOM元素在字符串数组中的索引，结果必然是-1。而splice(-1, 1)的作用是删除数组最后一项，这就是每次都删最后一个元素的直接原因。
3. 列表项未关联对应数组元素：创建<li>时没有给每个项绑定能定位到数组对应位置的标识，无法精准删除目标项。

修复方案 #

1. 调整HTML结构 #

移除包裹列表的多余<span>，简化结构：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shopping List</title>
    <link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./css/styles.css">
</head>
<body>
    <div class="container">
        <h2>Shopping List</h2>
        <div class="header">
            <input type="text" id="input" placeholder="Item">
            <span onclick="updateList(myArray)" id="addBtn"><button>Add Item</button></span>
        </div>
        <ul id="itemList"></ul>
    </div>
    <script src="mainForTask2.js"></script>
</body>
</html>

2. 重写JavaScript逻辑 #

给每个列表项绑定点击事件，通过索引精准删除对应数组元素：

let myArray = ["Sugar", "Milk", "Bread", "Apples"];
let list1 = document.querySelector("#itemList");

// 渲染数组到列表
const arrayList = (arr) => {
    list1.innerHTML = '';
    arr.forEach((item, index) => {
        let li = document.createElement('li');
        li.textContent = item;
        // 绑定点击事件，传递当前项的索引
        li.onclick = () => deleteItem(index);
        list1.appendChild(li);
    });
}

// 初始化渲染
arrayList(myArray)

// 标记已售商品
const idSelector = () => {
    let liElements = document.getElementsByTagName("li");
    // 增加长度判断，避免数组过短时报错
    if (liElements.length >= 1) liElements[0].style.color = "red";
    if (liElements.length >= 4) liElements[3].style.color = "red";
}

idSelector()

// 添加商品
const updateList = (arr) => {
    let inputValue = document.getElementById("input").value.trim();
    if (inputValue === "") {
        alert("请输入要添加的商品");
    } else {
        arr.push(inputValue);
        arrayList(myArray);
        idSelector();
        document.getElementById("input").value = ""; // 清空输入框
    }
}

// 根据索引删除商品
const deleteItem = (index) => {
    myArray.splice(index, 1);
    arrayList(myArray);
    idSelector();
}

额外优化说明 #

• 给所有函数添加const声明，避免全局变量污染
• 添加输入框清空逻辑，提升用户体验
• 在标记已售商品的函数中增加长度判断，防止数组长度不足时触发报错
• 用索引定位删除比indexOf更可靠，避免数组存在重复商品时删错项

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