Question

我发誓我在论坛上搜索了一个解决方案，但老实说我刚刚开始学习Javascript，所以我不太擅长从不同的代码中推导解决方案并自己使用逻辑。我是总菜鸟。

我希望删除按钮删除单击时指定的项目。我不明白为什么我的deleteMe（）函数没有做任何事情。

var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.querySelector("ul");
var listItem = document.querySelectorAll("li");
var dlt = document.getElementsByClassName(".delete")


function deleteMe() {
    dlt.addEventListener("click", function() {
        this.removeChild();
    })
}


function delButton(parent) {
    var del = document.createElement("button");
    del.appendChild(document.createTextNode("Done!"));
    parent.appendChild(del);
    button.className = "delete";
        }




function addToggle() {
    this.classList.toggle("done");
}

function addEntry() {
    if (input.value.length > 0 ) {
    var newItem = document.createElement("li");
    newItem.appendChild(document.createTextNode(input.value));
    ul.appendChild(newItem);
    input.value="";
    newItem.addEventListener("click",addToggle);
    delButton(newItem);
                }
    }


for ( var i = 0 ; i < listItem.length; i++) {
    listItem[i].addEventListener("click", addToggle);
    delButton( listItem[i]);
    }


button.addEventListener("click", addEntry);
input.addEventListener("keypress", function() {
    if ( event.keyCode === 13 ) {
    addEntry()}
});

如果有人能解释我做错了什么，我真的很感激。谢谢！

Answer 1

dlt目前是HTMLCollection，而不是元素，因此您无法向其添加事件侦听器。首先从中选择一个元素（例如通过迭代），或者甚至更好，将侦听器分配给容器，并让侦听器检查被点击目标的className是否为delete 。我会将监听器添加到ul，只需一次，靠近脚本的开头：

ul.addEventListener('click', (e) => {
  // e.target represents the clicked element
  if (e.target.className !== 'delete') return;
  e.target.parentElement.remove();
});

如果您想为每个delete分配一个单独的监听器，则必须在delButton内添加监听器，如下所示：

function delButton(parent) {
  var del = parent.appendChild(document.createElement("button"));
  del.textContent = 'Done!';
  button.className = "delete";
  button.addEventListener('click', () => button.parentElement.remove());
}

删除按钮不工作待办事项列表DOM

1 个答案: