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

新闻中心 NEWS CENTER

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

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

2025-10-29

浏览次数：次

返回列表

使用 javascript 从列表中删除特定项

本文档旨在指导开发者如何使用 J*aScript 实现从列表中删除特定项的功能，而不是仅仅删除最后一项。我们将分析常见错误，并提供正确的实现方式，包括事件处理、索引查找以及数组操作，并提供完整的代码示例。

问题分析

初学者在实现列表项删除功能时，经常会遇到点击任何列表项都只删除最后一项的问题。这通常是由于以下原因造成的：

事件处理不当： onclick 事件直接绑定到包含所有列表项的容器上，而不是每个单独的列表项。
索引获取错误： 尝试获取要删除的元素的索引时，获取的是错误的值，或者根本没有正确获取到索引。
splice() 方法使用不当： 即使获取了正确的索引，也可能因为 splice() 方法的使用方式不正确而导致删除错误。

正确的实现方式

以下是一个正确的实现方式，它解决了上述问题：

HTML 结构：

第三波网上书店源码

网络购物已经随着Ineternet的飞速发展而得到越来越多应用。为了提高交易效率，节省人们的宝贵时间，我们开发了这套稳定可靠、操作方便、安全有效的时尚购书系统，它主要分为前台和后台两大模块：（前台）使用了站点地图，显示您所在网站的位置。首页图书列表显示，用户登陆，用户注册，列出图书详细，购物车功能，以及结算等。（后台）图书、用户的添加，删除，修改等操作，查看客户的订单及修改该项目采用三层结构开

0 查看详情第三波网上书店源码

<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>

J*aScript 代码：

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

// This function pushed my array items to create the list
arrayList = (arr) => {
  list1.innerHTML = ''; // Clear the list before re-rendering
  arr.forEach(item => {
    let li = document.createElement('li');
    li.textContent = item;
    li.addEventListener('click', deleteItem); // Add event listener 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");
  if (idElement.length > 0) { // Check if elements exist before accessing them
    idElement[0].style.color = "red";
    if (idElement.length > 3) {
      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);
    arrayList(myArray); // Re-render the list after adding
    idSelector();
    document.getElementById("input").value = ""; // Clear the input field
  }
}

//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.textContent; // Get the text content of the clicked list item
  let index = myArray.indexOf(clk);
  if (index > -1) {
    myArray.splice(index, 1);
  }
  arrayList(myArray); // Re-render the list after deleting
  idSelector();
}

代码解释：

事件监听器： 在 arrayList 函数中，我们不再使用 onclick 属性，而是使用 addEventListener 方法将 deleteItem 函数绑定到每个 li 元素的 click 事件上。这确保了每个列表项都有自己的事件处理程序。
获取点击的元素： 在 deleteItem 函数中，event.target 指向实际点击的 li 元素。我们使用 event.target.textContent 获取该元素的文本内容。
查找索引： myArray.indexOf(clk) 查找数组中与点击的元素的文本内容相匹配的元素的索引。
删除元素： 如果找到了索引（index > -1），则使用 myArray.splice(index, 1) 从数组中删除该元素。 splice() 方法会修改原始数组。
重新渲染列表： 在删除元素后，需要重新渲染列表，以反映数组的更改。我们通过调用 arrayList(myArray) 来实现这一点。
idSelector 函数的安全调用: 检查idElement的长度，防止访问不存在的元素。