Проблема с добавлением дочерних узлов

Question

Я строю список дел. Почти все работает; новые задачи переносятся наверх, когда нажимается кнопка «X», задача исчезает. Моя проблема в том, что я не смог создать новую задачу, созданную с удаленной буквой «X» справа.

Мои полные коды здесь: https://codepen.io/paddlepop18/pen/Orevvp?editors=0010

Я попытался поместить функцию удаления в глобальную область, но она не сработала, и я подумал, что размещение ее в «функции createListItem» поможет, поскольку она является родителем функции удаления.

Я протестировал с помощью "console.log function", и она отлично работает.

Это просто коды функций удаления:

function addListItem() { 
todoInputEl.addEventListener("keypress", function(event) {
    if (event.keyCode === 13) {
        let newListItem = createListItem(todoInputEl.value);
        todoListEl.insertBefore(newListItem, 
        todoListEl.childNodes[0]);
        // let newDeleteXX = createDeleteX(todoItemEls);    
        todoListEl.insertBefore(newDeleteXX, 
        // toDeleteEls.childNodes[0]);

        todoInputEl.value = "";
    }
})    

}
function createDeleteX(todoItemEls) {
    const newDeleteX = document.createElement("button");
    newDeleteX.className= "to__delete";
    newDeleteX.textContent = "X";
    return newDeleteX;
}

Я должен закомментировать все строки, относящиеся к функции удаления, в функции addListItem (), потому что если я не сделаю этого, любой новый ввод не будет очищен после нажатия клавиши Enter.

Answer 1

В вашем примере кода слушатель событий ищет события на SPAN,

todoBodyEl.addEventListener("click", (event) => {
    if (event.target.tagName === "SPAN") {
      let li = event.target.parentNode;
      let ul = li.parentNode;
      ul.removeChild(li);
    }
  });

но при создании нового элемента вы добавляете кнопку.

function createDeleteX(todoItemEls) {
    const newDeleteX = document.createElement("button");
    //...
}

Изменение кнопки на диапазон (и раскомментирование и вызов) устраняет проблему. Смотрите обновленный код: https://codepen.io/anon/pen/vvqjQd?editors=0010

Answer 2

Это работает как шарм:

const getToDeleteEls = function(){ return document.querySelector(".to__delete"); }
let toDeleteEls = getToDeleteEls(), i = 0;
for(; i < toDeleteEls.length; i++){
  toDeleteEls[i].addEventListener("click", deleteParent);
}
function deleteParent(event){
  event.target.parentNode.parentNode.removeChild(event.parentNode);
}

(Примечание. Предполагается, что функция getToDeleteEls позволяет обновлять toDeleteEls при каждом добавлении нового элемента (чтобы мы могли добавлять прослушиватели во вновь созданные промежутки) - но с тех пор я понял, что мой выбор заключается в добавлении этих прослушивателей в цикл for (который также должен запускаться после каждого нового добавления) плох, потому что он создаст много избыточных прослушивателей, поэтому я рекомендую пересмотреть эту часть, но основная функциональность «Click X для удаления» является твердой.)

Answer 3

Слушатель события 'click' должен быть добавлен к каждому элементу с 'X' (newDeleteX). Вам нужно немного изменить createListItem метод:

function createListItem(text) {
    const newListElement = document.createElement("li");
    newListElement.textContent = text;
    newListElement.setAttribute("class", "todo__item")

    const newDeleteX = document.createElement("span");
    newDeleteX.className= "to__delete";
    newDeleteX.textContent = "X";

    // add event listener to element with "X"
    newDeleteX.addEventListener("click", (event) => {
        event.target.parentElement.remove();
    });

    // add element with "X" to newListElement
    newListElement.appendChild(newDeleteX);

    return newListElement;
}