如何从 DOM 和数组中删除项目

Question

我目前正在尝试构建一个列表应用程序，用户在其中向列表输入一个项目，输入的项目显示在页面上，并被推入一个名为“items”的数组中。

项目显示在页面上并被推送到数组的部分工作正常，以及从页面中删除项目。我运行遇到麻烦的地方是从数组中删除。发生的情况是，当项目从 DOM 中删除时，并不总是删除相应的数组元素。

看来同时从页面和数组中删除项目并不是那么容易。而且我需要将项目推送到一个数组，因为这个数组将用于其他我已经弄清楚的东西。

目前，我正在尝试使用 splice，但效果似乎不太好。

我也试过重写这个程序，首先将项目推送到数组，然后使用 for 循环遍历数组并让项目出现在页面上。

下面的 link 指向相关应用程序的实时版本。它托管在我的 Neocities 帐户上。

感谢任何能提供帮助的人！

https://chillaxin-cyborg.neocities.org/ListApp.html

这是我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #myList {
            list-style: none;
        }
        li {
            padding: 10px;
            max-width: 300px;
            background-color: rgb(186, 255, 129);
            font-size: larger;
            font-weight: bold;
            border-style: double;
            border-radius: 10px;
            text-align: center;
            margin: 5px;
        }
        .remove-btn {
            float: right;
            background-color: red;
            color:black;
            
        }
        #itemAdd {
            padding: 10px;
            font-size: larger;
            text-align: center;
        }
        #itemName {
            padding: 10px;
            max-width: 300px;
            font-size: larger;
            font-weight: bold;
            border-style: double;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container main">
        <form action="" method="post">
        <input type="text" id="itemName">
        <button onclick="addItem()" id="itemAdd">ADD</button>
        </form>
        <div>
            <ul id="myList">
                
            </ul>
        </div>
    </div>
    <script>

        let items = [];

        const addItem = () => {
            event.preventDefault();
            let myList = document.getElementById('myList');
            let listItem = document.createElement('li');
            listItem.innerText = itemName.value + "  ";
            myList.append(listItem);
            let removeButton = document.createElement('button');
            removeButton.innerText = "-";
            removeButton.className = "remove-btn"
            removeButton.addEventListener('click', removeItem);
            listItem.append(removeButton);
            items.push(itemName.value);
            document.forms[0].reset();
        }

        const removeItem = () => {
            let item = event.currentTarget.parentNode;
            item.remove();
            let itemIndex = items.indexOf(item);
            items.splice(itemIndex, 1);
        }
    </script>
</body>
</html>

Answer 1

我在这里盲目编程，如果代码不完美，请与我交流。

问题出在 let itemIndex = items.indexOf(item); 行，您在其中搜索带有节点（类似于 DOM 对象）的字符串数组。

相反，将 data-* 属性添加到您的 <li> 元素，您可以在其中添加用户键入的内容，并通过 dataset property 提取该属性。然后使用该字符串搜索您的 list 数组。

我冒昧地重构了您的一些代码以使其更具可读性。

   let items = [];
   
    var createListItem = (text) => {
        let listItem = document.createElement('li');
        listItem.innerText = text;
        listItem.setAttribute('data-value', text); // adding a data attribute
        
        return listItem;
    }
    
    var createRemoveButton() {
        let removeButton = document.createElement('button');
        removeButton.innerText = "-";
        removeButton.className = "remove-btn"
        removeButton.addEventListener('click', removeItem);
        
        return removeButton;
    }

    const addItem = () => {
        event.preventDefault();
        let userInput = itemName.value.trim();
        let myList = document.getElementById('myList');
        let listItem = createListItem(userInput);

        listItem.append(createRemoveButton());
        myList.append(listItem);
        
        items.push(userInput);
        document.forms[0].reset();
    }

    const removeItem = (event) => {
        let item = event.currentTarget.parentNode;
        let userInput = item.dataset.value; // extracting the data attribute
        item.remove();
        let itemIndex = items.indexOf(userInput);
        items.splice(itemIndex, 1);
    }

如何从 DOM 和数组中删除项目

How do I remove items from DOM and Array

javascript

arrays

dom