Не корректно удаляется значение из массива по клику

Question

Пишу To do list, добавляю значение по клику кнопки в массив, работаю через Local Storage, чтобы введённые раньше значения не исчезали после перезагрузки страницы. Удаляю по клику на параграф. Использую splise, вычисляя нужный мне элемент по атрибуту (индекс). Работает все корректно, если удалять с конца, но если удаляю в середине, затем в конце, последний элемент массива не удается. Не знаю как исправить этот баг. Помогите пожалуйста найти ошибку.

<div class="list-enter">
            <input type="text" class="input-list" placeholder="&#9998">
            <button class="btn-list">ok</button>
            <div class="save">
                <img src="./img/down.png" alt="#" class="download">
            </div>
        </div>
        <div class="div-list">
        </div>

document.querySelector('.btn-list').addEventListener('click', function () {
        if (valueList.value) {
            let div = document.createElement('div');
            div.classList.add('p-list')
            div.setAttribute('data-index', arrList.length)
            let index = +div.getAttribute('data-index')


            let pList = document.createElement('p');
            let pClose = document.createElement('p');

            pClose.innerText = 'X'
            pClose.classList.add('close');
            pList.innerHTML = valueList.value;
            div.append(pList);
            div.append(pClose);
            divOut.append(div);
            arrList.push({ done: false, text: valueList.value });
            console.log(arrList[index], index)
            // checked list
            pList.addEventListener('click', function () {
                if (div.classList.contains('checked') != true) {
                    arrList[index].done = true;
                    div.classList.add('checked')
                }
                else {
                    arrList[index].done = false
                    div.classList.remove('checked')
                }

                localStorage.setItem('list', JSON.stringify(arrList))
            });

            // delete list (вот тут проблема)
            pClose.addEventListener('click', function () {
                div.remove();
                arrList.splice(index, 1)
                localStorage.setItem('list', JSON.stringify(arrList))
            });

            localStorage.setItem('list', JSON.stringify(arrList))
        }

        valueList.value = ''
    });

Answer 1

Здесь Вы используете захваченную в замыкание переменную индекс, которая не отражает правильный индекс элемента в списка после удаления какого-либо элемента перед ним:

        pClose.addEventListener('click', function () {
            div.remove();
            arrList.splice(index, 1);
            localStorage.setItem('list', JSON.stringify(arrList));
        });

Уберите index и 'data-index'. Вместо этого:

let item = { done: false, text: valueList.value };
arrList.push(item);
div.item = item;

и

        pClose.addEventListener('click', function () {
            let index = arrList.indexOf(div.item);
            div.remove();
            arrList.splice(index, 1)
            localStorage.setItem('list', JSON.stringify(arrList))
        });

БЛОГ НА HUSL

Не корректно удаляется значение из массива по клику

Ответы (1 шт):