我正在创建一个程序，其中包含购物 list 的物品，然后用户可以添加物品到 list 中.我希望用户能够通过简单地点击该项目从购物 list 中删除项目.当我点击该项目时，无论我点击哪个项目，最后一个项目都会被删除.我只是想找出为什么只删除数组中的最后一项，而不是我正在 Select 的项.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shopping List</title>
<!-- Link Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
<!-- External CSS link-->
<link rel="stylesheet" href="./css/styles.css">
</head>
<body>
<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>
<span value="\uOOD7" class="close" onclick="deleteItem(myArray)">
<ul id="itemList">
</ul>
</span>
</div>
<script src="mainForTask2.js"></script>
</body>
</html>
Javascript
//This is a javascript program which added the items in my array to an unordered list
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;
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"
console.log(idElement.value)
}
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 = (arr) => {
let red = document.getElementById("close");
const index = arr.indexOf(red);
const x = arr.splice(index, 1)
console.log(arr)
console.log(x)
list1.innerHTML = '';
arrayList(myArray)
idSelector()
}