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

【问题标题】：How do I remove items from DOM and Array如何从 DOM 和数组中删除项目
【发布时间】：2021-12-15 23:37:27
【问题描述】：

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

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

似乎同时从页面和数组中删除项目并不容易。而且我需要将项目推送到一个数组，因为这个数组将用于其他我已经想通的东西。

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

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

以下链接指向相关应用的实时版本。它托管在我的 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>

【问题讨论】：

欢迎。请参阅How to ask 并拨打tour。你应该添加minimal reproducible code
请提供足够的代码，以便其他人更好地理解或重现问题。
试过你的程序。在removeItem() 中执行console.log(itemIndex)，您可能会发现问题所在。您只是删除数组中的最后一个索引，而不是从正确的位置删除。包含完整代码（包括 HTML）会更容易，因此我们可以为您调试代码。
您好，感谢您的回复。我很抱歉这么晚才更新。我上夜班，今天有点累。无论如何，我更新了我的代码以包含所有 HTML，我还加入了我的 CSS 以防万一。

标签： javascript arrays dom

【解决方案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);
    }

【讨论】：

哇！感谢您抽出宝贵时间完成所有这些工作，我的朋友。谢谢您的好意！关于您的更新的快速问题。我注意到你使用了 var，并且看到我仍然是一个新手程序员，使用“var”而不是“let”或“const”有什么优势。我知道范围是这两者之间的一个区别，因为 var 是全局范围的（我相信）。
我不创建这样的函数。相反，我将它们声明为function removeItem(event) {。将“const”用于可用于创建多个不同项目的东西感觉不对，所以我改用了“var”。对我来说，这是任意的。
啊，好吧，那是有道理的。我感谢你所有的帮助，伙计。谢谢！