Question

您好我已尝试使用“indexOf”但仍然看起来我删除了数组的最后一个元素而不是所选元素...

我如何解决这个问题，所以我选择的元素是被删除的元素而不是最后一个元素......

我已尝试使用“indexOf”我已经尝试过....我知道如何移除和元素但现在元素的位置我不知道如何移除???

function getTodoItems() {
    for (var i = 0; i < dataArray.length; i++) {
        if (!dataArray[i].listItem.length) return;
        var itemList = document.getElementById("my-todo-list");
        var list = document.createElement("li");
        itemList.appendChild(list);
        list.innerHTML = dataArray[i].listItem;
        var spanItem = document.createElement('span');
        spanItem.style.float = 'right';
        var myCloseSymbol = document.createTextNode('\u00D7');
        spanItem.classList.add("closeBtn");
        spanItem.appendChild(myCloseSymbol);
        listItems[i].appendChild(spanItem);

/////////////////////////////相关部分//////////////// /////////////

        close[i].onclick = function() {
            var div = this.parentElement;
            div.style.display = "none";
            var position = dataArray.indexOf(dataArray[i]); // Fix denne her linje
            dataArray.splice(position, 1); // Fix denne her linje
            localStorage.setItem("itemListRecord", JSON.stringify(dataArray));
            console.log(dataArray);
        }

/////////////////////////////////////////////// //////////////////////////////

        var list = document.getElementsByTagName('li');
        list[i].onclick = function() {
            this.classList.toggle("checked");
        }

    }
}

https://jsfiddle.net/headbangz/r2sx0yhz/

以下是我的代码的外观

Answer 1

您可以使用Array.filter来过滤我们不需要的元素。

＆＃13;

const arr = [1, 2, 3, 4, 5];

const result = arr.filter((item) => item % 2 === 0);

console.log(result);

＆＃13;

您在代码中的问题可能与以下事实有关：当您设置onclick时，闭包指向 i 值，而不是像您可能想要的那样填充它。

您可以按顺序使用IIFE来保存i值。

close[i].onclick = (function(i){
       return function() {
            var div = this.parentElement;
            div.style.display = "none";
            var position = dataArray.indexOf(dataArray[i]); // Fix denne her linje
            dataArray.splice(position, 1); // Fix denne her linje
            localStorage.setItem("itemListRecord", JSON.stringify(dataArray));
            console.log(dataArray);
        }
}(i))

Answer 2

这是问题所在： var position = dataArray.indexOf(dataArray[i]);

当你的循环运行完毕后，i将始终引用最后一项的索引。例如，此函数看起来可能会打印1,2,3,4,5。实际上，它会打印5五次。当console.log部分实际运行时，变量i已经等于5。：

for (var i = 0; i < 5; ++i){ setTimeout(function(){ console.log(i); }, 2000) }

^尝试将其粘贴到您的控制台中。

无论如何，要修复它，您需要找到数组中项目的索引，其中key:value对与您需要删除的待办事项的文本相匹配。

close[i].onclick = function(e) {
            var div = e.target.parentElement;
            var divText = div.childNodes[0].nodeValue; // use this!
            div.style.display = "none";
            var position = dataArray.findIndex(todo => todo.listItem === divText);
            dataArray.splice(position, 1);
            localStorage.setItem("itemListRecord", JSON.stringify(dataArray));
        }

工作小提琴：https://jsfiddle.net/r2sx0yhz/3/

SideNote：这也应该改变。在隐身窗口中试试你的小提琴，看看为什么。

// this is bad... a user may not have anything in their localStorage yet.
var dataArray = [];
dataArray = JSON.parse(localStorage.getItem("itemListRecord"));
// do this instead.
var dataArray = JSON.parse(localStorage.getItem("itemListRecord")) || new Array();

从数组中删除所选元素

2 个答案: