Question

我正在建立待办事项清单。几乎所有东西都起作用；新待办事项被推到顶部，单击“ X”按钮，待办事项就消失了。我的问题是我无法通过删除右侧的X来创建新的待办事项。

我的完整代码在这里： https://codepen.io/paddlepop18/pen/Orevvp?editors=0010

我尝试将delete函数放置在全局范围内，但是它不起作用，我认为将其放置在“ createListItem function”下会有所帮助，因为它是delete函数的父级。

我已经使用“ console.log函数”进行了测试，它可以完美运行。

这只是删除功能代码：

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（）函数中与delete函数有关的所有行，因为如果不这样做，则在按Enter键后将不会清除任何新输入。

Answer 1

'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;
}

Answer 2

在您的代码示例中，您的事件监听器正在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 3

这就像一种魅力：

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循环（每次添加新循环之后也需要运行）是不好的，因为它会创建许多冗余的侦听器。因此，我建议修改该部分，但“单击X删除”的核心功能是可靠的。）

附加childNodes

3 个答案: