本文旨在帮助开发者理解如何使用 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 代码：
立即学习“Java免费学习笔记（深入）”；
人声去除
用强大的AI算法将声音从音乐中分离出来
23 查看详情
let myArray = ["Sugar", "Milk", "Bread", "Apples"];let list1 = document.querySelector("#itemList");//This function pushed my array items to create the listarrayList = (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 soldconst 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 listupdateList = (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 arraydeleteItem = (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 属性指向触发事件的元素。在本例中，它是用户点击的
注意事项
确保数组中的元素与列表项的文本内容完全匹配。如果存在空格或大小写差异，indexOf 可能无法找到正确的索引。如果你的列表项包含 HTML 元素，例如按钮或图标，你需要修改代码以获取正确的文本内容。在大型列表中，频繁地清空和重新生成列表可能会影响性能。考虑使用更有效的方法来更新列表，例如只更新已更改的元素。
总结
通过传递事件对象并使用 event.target 和 indexOf，我们可以准确地识别并删除用户点击的特定列表项。这种方法避免了总是删除最后一个元素的问题，并提供了更直观和用户友好的体验。希望本教程能够帮助你更好地理解 JavaScript 事件处理和数组操作。
以上就是使用 JavaScript 从列表中删除特定元素的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/310557.html
微信扫一扫 
支付宝扫一扫 
