17370845950

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

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

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

解决方案：事件目标和 indexOf

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

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

代码示例

以下是修改后的 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

        
            
            Add Item
        
        
        




        
    
    

    

关键修改：

• 在 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 函数会修改原始数组。

注意事项

• 确保数组中的元素与列表项的文本内容完全匹配。如果存在空格或大小写差异，indexOf 可能无法找到正确的索引。
• 如果你的列表项包含 HTML 元素，例如按钮或图标，你需要修改代码以获取正确的文本内容。
• 在大型列表中，频繁地清空和重新生成列表可能会影响性能。考虑使用更有效的方法来更新列表，例如只更新已更改的元素。

总结

通过传递事件对象并使用 event.target 和 indexOf，我们可以准确地识别并删除用户点击的特定列表项。这种方法避免了总是删除最后一个元素的问题，并提供了更直观和用户友好的体验。希望本教程能够帮助你更好地理解 JavaScript 事件处理和数组操作。