如何使用 for 循环和拼接或数组方法在具有文本输入字段的数组中添加和删除项目-解网

问：

我已将文本框作为输入字段，以将元素（数字）添加到空数组中。并从按钮 CLCIKS 上的该数组中删除元素。我有两个按钮：添加 BTN 和删除按钮。单击“添加 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
}

JavaScript HTML 数组 for-loop dom

let array = [];

function add() {
    let input = parseInt(document.getElementById("number").value, 10);
    let output = document.getElementById("arrayElements");
    array.push(input);
    output.innerHTML = `Value added to the array: [${array.join(', ')}]`;
}

function remove() {
    let input = parseInt(document.getElementById("number").value, 10);
    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.join(', ')}]`;
}

#arrayElements {
  margin-top: 20px;
  font-weight: bold;
}

body {
  font-family: sans-serif;
}

<!DOCTYPE html>
<html>
<head>
    <title>Array Manipulation</title>
</head>
<body>
    <input type="number" id="number" placeholder="Enter a number">
    <button onclick="add()">Add</button>
    <button onclick="remove()">Remove</button>
    <div id="arrayElements"></div>
</body>
</html>

其他不是问题核心答案的更改：

删除 add 和 remove 函数中的参数，因为它未使用。n
修复输出以显示当前数组。
使用模板文本以获得更好的字符串格式。
目前，输入值存储为字符串。即使在添加到输入后，JavaScript 仍会将输入值读取为字符串。因此，您仍然需要使用或根据您的用例将其转换为数字。type="number"parseInt()parseFloat()

上一个：如何在 React 的类中用返回数组嵌套两个状态

下一个：在 DOM 上更改 variabe 后，如何在 javascript 中获取 variabe 的初始值？

如何使用 for 循环和拼接或数组方法在具有文本输入字段的数组中添加和删除项目

How to add and remove items from array with a text input field using for-loop, and splice or array methods

评论