Привет, я пробовал использовать 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/

Вот как выглядит мой код

-2
Thomas Hermansen 30 Дек 2017 в 19:11

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/

Примечание: это также следует изменить. Попробуйте сыграть на скрипке в режиме инкогнито, чтобы понять, почему.

// 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();
0
TJBlackman 30 Дек 2017 в 18:58

Вы можете использовать Array.filter для фильтрации наших нежелательных элементов.

const arr = [1, 2, 3, 4, 5];

const result = arr.filter((item) => item % 2 === 0);

console.log(result);

Ваша проблема в коде, вероятно, связана с тем фактом, что при установке onclick замыкание указывает на значение i , а не инкапсулирует его, как вы, вероятно, хотели.

Вы можете использовать IIFE, чтобы сохранить { {X0}} значение.

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))
0
felixmosh 30 Дек 2017 в 19:16