我采用了一个文本框作为输入字段，将元素（数字）添加到空数组中。并通过按钮点击从该数组中删除元素。我有两个按钮添加按钮和删除按钮。单击“add btn”后，无论我们在文本框中输入什么内容，它都会被添加到数组中。单击删除按钮后，无论输入字段中的数字是什么。该数字应与重复项一起从数组中删除。
我面临的问题是当数组中存在更多相似元素的重复项时。单击按钮时，所有相似的元素都不会从数组中删除。数组中剩余一些元素。
let array = []
function add(n) {
let input = document.getElementById("number").value
let output = document.getElementById("arrayElements")
array.push(input)
output.innerHTML = "Value added to the array :" + array
}
function remove(n) {
let input = document.getElementById("number").value
let output = document.getElementById("arrayElements")
// for (let i = 0; i <= array.length; i++) {
// if (array[i] == input) {
// delete array[i]
// }
// }
for (let i = 0; i <= array.length; i++) {
// debugger
const index = array.indexOf(input)
if (index != -1) {
array.splice(index, 1)
}
console.log("array", array);
}
// array = array.filter(item => item !== input)
// console.log(array);
output.innerHTML = "Value removed from the array :" + newarr
}
出现问题的原因是您在迭代数组时修改数组，导致索引不匹配。
这里有两种方法：
let array = [];
function add() {
let input = document.getElementById("number").value;
let output = document.getElementById("arrayElements");
array.push(input);
output.innerHTML = `Value added to the array: ${array}`;
}
function remove() {
let input = document.getElementById("number").value;
let output = document.getElementById("arrayElements");
// Approach 1: Using filter
// array = array.filter(item => item !== input);
// Approach 2: Using splice in while loop
let index = array.indexOf(input);
while (index !== -1) {
array.splice(index, 1);
index = array.indexOf(input);
}
output.innerHTML = `Value removed from the array: ${array}`;
}<!DOCTYPE html>
<html>
<head>
<title>Array Manipulation</title>
<style>
#arrayElements {
margin-top: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<input type="text" id="number" placeholder="Enter a number">
<button onclick="add()">Add</button>
<button onclick="remove()">Remove</button>
<div id="arrayElements"></div>
</body>
</html>非问题核心答案的其他更改：
n