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

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

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();
}