使用 JavaScript 从列表中删除特定元素_技术教程

本文旨在帮助开发者理解如何使用 JavaScript 从动态生成的列表中删除特定元素，而不是总是删除最后一个元素。我们将通过修改现有的 `deleteItem` 函数，使其能够识别被点击的元素，并从数组中正确地移除它。本文将提供详细的代码示例和解释，确保你能够轻松地将此功能集成到你的项目中。

理解问题：为什么总是删除最后一个元素？

原始代码中的 deleteItem 函数试图通过 document.getElementById("close") 获取要删除的元素。然而，getElementById 只能获取页面上 第一个 具有指定 ID 的元素。由于你的列表项是动态生成的，并且可能没有唯一的 ID，因此 deleteItem 函数总是会尝试删除页面上的第一个 "close" 元素，这通常不是你想要删除的列表项。

解决方案：事件目标和 indexOf

为了正确删除特定元素，我们需要以下步骤：

传递事件对象： 修改 HTML 中的 onclick 事件处理程序，将事件对象 (event) 传递给 deleteItem 函数。
获取被点击的元素： 在 deleteItem 函数中，使用 event.target 获取实际被点击的元素。
获取元素的文本内容： 使用 event.target.innerHTML 获取被点击元素的文本内容，这对应于列表项的文本。
查找元素的索引： 使用 myArray.indexOf(clk) 找到该文本内容在数组中的索引。
删除元素： 使用 myArray.splice(index, 1) 从数组中删除该索引处的元素。
更新列表： 清空列表，然后使用更新后的数组重新生成列表。

代码示例

以下是修改后的 JavaScript 代码：

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

//This function pushed my array items to create the list
arrayList = (arr) => {
  let items = arr.forEach(item => {
    let li = document.createElement('li');
    li.textContent = item;
    li.onclick = deleteItem; // Add onclick event to each list item
    list1.appendChild(li)
  });
}

arrayList(myArray)


//This function changed the background color of two of the list items to show that they are sold
const idSelector = () => {
  let idElement = document.getElementsByTagName("li")
  idElement[0].style.color = "red"
  idElement[3].style.color = "red"
}

idSelector()

//This function uses the user input from the form to add items to the list
updateList = (arr) => {
  let blue = document.getElementById("input").value;

  if (blue === "") {
    alert("Please enter a value if you wish to add something to your list.")
  } else {
    arr.push(blue);
    list1.innerHTML = '';
    arrayList(myArray)
    idSelector()
  }

}

//This function is meant to delete the specified item chosen by the user from the shopping list and the array
deleteItem = (event) => {
  let clk = event.target.innerHTML;
  //console.log(clk);
  let index = myArray.indexOf(clk);
  if (index > -1) 
  {
    myArray.splice(index, 1);
  }
  list1.innerHTML = '';
  arrayList(myArray)
}

以下是修改后的 HTML 代码：


    
        Shopping List

关键修改：

在 arrayList 函数中，为每个新创建的 li 元素添加了 onclick = deleteItem，这样点击列表项时就会触发 deleteItem 函数。
删除了 span 标签上的 onclick 事件，因为现在点击列表项本身触发删除。
deleteItem 函数现在通过 event.target.innerHTML 获取点击的列表项的文本内容。

代码解释

event.target: event.target 属性指向触发事件的元素。在本例中，它是用户点击的
元素。
event.target.innerHTML: 获取
元素的文本内容，即列表项的名称。
myArray.indexOf(clk): 在 myArray 数组中查找与被点击列表项的文本内容匹配的元素的索引。如果找不到匹配的元素，indexOf 将返回 -1。
myArray.splice(index, 1): 从 myArray 数组中删除索引为 index 的元素。splice 函数会修改原始数组。