使用 J*aScript 从列表中删除特定元素_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

使用 J*aScript 从列表中删除特定元素

2025-10-29

浏览次数：次

返回列表

使用 javascript 从列表中删除特定元素

本文旨在帮助开发者理解如何使用 J*aScript 从动态生成的列表中删除特定元素，而不是总是删除最后一个元素。我们将通过修改现有的 `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) 从数组中删除该索引处的元素。
更新列表： 清空列表，然后使用更新后的数组重新生成列表。

代码示例

以下是修改后的 J*aScript 代码：

立即学习“J*a免费学习笔记（深入）”；

风车Ai翻译

跨境电商必备AI翻译工具

407 查看详情风车Ai翻译

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 代码：

<body>
    <div class="container&quot;>
        <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>
        <span value="\uOOD7" class="close">
        <ul id="itemList">



        </ul>
    </span>
    </div>

    <script src="mainForTask2.js"></script>
</body>

关键修改：

在 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，我们可以准确地识别并删除用户点击的特定列表项。这种方法避免了总是删除最后一个元素的问题，并提供了更直观和用户友好的体验。希望本教程能够帮助你更好地理解 J*aScript 事件处理和数组操作。

以上就是使用 J*aScript 从列表中删除特定元素的详细内容，更多请关注其它相关文章！

# java # javascript # 自定义 # 第一个 # 列表中 # 组中 # red # 为什么 # apple # ai # app # js # html # 应聘seo演讲 # 日本日本网站推广百度 # 营口seo服务有哪些 # 微营销的推广思路 # 怎么做携程小店营销推广 # 广元网站推广服务商 # 江津网站建设哪家好 # 地产seo托管 # 视频网站推广有免费 # 全网热点关键词推荐排名 # 有哪些 # 有何区别 # 能做什么 # 如何实现 # 清空 # 多线程

相关栏目：【科技资讯46185 】【网络学院92790 】

上一篇：React元素动态类名切换：管理一个元素的多种状态

下一篇：在css中选择last-of-type元素方法

首页

关于我们

产品展示

咨询研究

新闻中心

留言板

联系我们