Удаление элемента из списка (элемент li) с указанием индекса -1. Javascript (Chrome расширение)

Question

Я делаю расширение chrome, в которое я добавляю элемент в список, и у него есть кнопка для удаления элемента. Он выполняет свою функцию, как и предполагалось, но выдает ошибку на панели расширений.

Uncaught TypeError: Cannot read property 'style' of null
For line :                 li.style.display = "none";

При добавлении предупреждения в функцию я вижу, что при первом нажатии любой из кнопок «Удалить» намеченный индекс получает предупреждение и в некоторых случаях -1 также предупрежден.

Код, который добавляет элемент и также имеет функцию удаления:

  function addItem(value){
    var li = document.createElement("LI");          
    var para = document.createElement("P");    
    var deleteButton = document.createElement("BUTTON");                   // Create a <p> node
    var t = document.createTextNode(value);      // Create a text node

    deleteButton.className = "delete";

    para.appendChild(t); 
    li.appendChild(para);
    li.appendChild(deleteButton);
    textList.appendChild(li); 

    $(".delete").click(function () {
                var index = $(this).index(".delete");
                alert(index); //This alert sometimes gives -1 
                var li = this.parentElement;
                li.style.display = "none";
                removeItem(index);  //This function just removes it from chrome local storage
                $(".delete").eq(index).remove();
            })
    }

Код не опубликован, только инициализирует список и добавляет элемент при нажатии кнопки. В чем может быть причина срабатывания этого индекса -1 и как его можно исправить?

Answer 1

Когда вы делаете это: $(".delete").click(...

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

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

Когда вы удаляете первый элемент, он будет плавно удален один раз, а затем дважды выдаст ошибку -1, потому что он уже сам удалил и не будет найден.

Я думаю, что если вы измените код следующим образом:

$(deleteButton).click(...

... это должно решить проблему.

Answer 2

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

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

function addItem(value) { 
  $(textList).append(`<li><p>${value}</p><button class="delete"></button></li>`);
}

jQuery($ => {
  $(textList).on('click', '.delete', function() {
    let $button = $(this);
    removeItem($button.index('.delete'));
    $button.closest('li').remove();
  });
});