Question

noobie在这里。我一直在编写待办事项列表，无法弄清楚如何识别每个新列表项中出现的listBtn按钮。据我了解，该按钮是未定义的，因为它最初并不存在。我试图用if语句if（listBtn！== null || listBtn！== undefined）来容纳它，但是它仍然无法正常工作。你能帮我吗？令人反感的代码如下：

https://codepen.io/david-webb/pen/qBbxVov

if (listBtn !== null || listBtn !== undefined)  {
    document.querySelector(".listBtn").addEventListener("click", function(){
    let elem = document.getElementById('myUL');
    console.log(elem);
    elem.parentNode.removeChild(elem);     
    });
}

Answer 1

当页面加载时，您试图找到一个尚不存在的按钮，因为您是在点击“添加按钮”时创建的。

解决方案是将您要选择按钮的部分移至其中以添加事件

 document.querySelector(".listBtn").addEventListener("click", function () {
        let elem = document.getElementById("myUL");
        console.log(elem);
        elem.parentNode.removeChild(elem);
      });

进入您的for循环

 for (let i = 0; i < todo.length; i++) {
      let textNode = document.createTextNode(todo[i]);
      let listItem = document.createElement("li");
      listItem.appendChild(textNode);
      list.appendChild(listItem);
      listBtn = document.createElement("button");
      let button_text = document.createTextNode("remove");
      listBtn.appendChild(button_text);
      list.appendChild(listBtn);
      listBtn.className = "listBtn";

      document.querySelector(".listBtn").addEventListener("click", function () {
        let elem = document.getElementById("myUL");
        console.log(elem);
        elem.parentNode.removeChild(elem);
      });
    }

我在您的代码中做了一些陈述，希望这会有所帮助

  let todo = [];
  let completed = []; 
  //ADD ITEM TO DOM

  //When mouse clicked, create list item and add to DOM

  document.getElementById("addBtn").addEventListener("click", function () {
    let list = document.getElementById("myUL");
    list.innerHTML = ""; //resetting the list

    let input = document.getElementById("input").value;
    if (input) {
      todo.push(input);
    } else {
      alert("Please add a task!");
    }
    //add close button to nodelist
    document.getElementById("input").value = "";
    for (let i = 0; i < todo.length; i++) {
      let textNode = document.createTextNode(todo[i]);
      let listItem = document.createElement("li");
      listItem.appendChild(textNode);
      list.appendChild(listItem);
      let listBtn = document.createElement("button");
      let button_text = document.createTextNode("remove");
      listBtn.appendChild(button_text);
      list.appendChild(listBtn);
      listBtn.className = "listBtn";

      document.querySelector(".listBtn").addEventListener("click", function () {
        let elem = document.getElementById("myUL");
        console.log(elem);
        elem.parentNode.removeChild(elem);
      });
    }
  });

  input.addEventListener("keypress", function (event) {
    // Number 13 is the "Enter" key on the keyboard
    if (event.keyCode === 13) {
      // Trigger the button element with a click
      document.getElementById("addBtn").click();
    }
  });

<input type="text" id="input" placeholder="Write here" />

<button id="addBtn">Add item</button>

<ul id="myUL"></ul>

Answer 2

该脚本在加载页面时执行，因此您一开始就永远找不到该元素，因为它是在以后创建的。您要做的就是在创建元素时添加事件监听器。

let todo = [];
let completed = [];

//ADD ITEM TO DOM

//When mouse clicked, create list item and add to DOM

  document.getElementById("addBtn").addEventListener("click", function() {
    
    let list = document.getElementById('myUL');
    list.innerHTML = ""; //resetting the list

    let input = document.getElementById("input").value;
     if (input) {
      todo.push(input); 
     } else {
       alert ("Please add a task!");
     }
     //add close button to nodelist
     document.getElementById("input").value = ""; 
     for (let i =0; i < todo.length; i++) {
        let textNode = document.createTextNode(todo[i]);
        let listItem = document.createElement("li")
        listItem.appendChild(textNode);
        list.appendChild(listItem);
        let listBtn = document.createElement("BUTTON");
        list.appendChild(listBtn);
        listBtn.className = "listBtn"
        // HERE YOU ADD THE EVENT
        listBtn.addEventListener("click", function(){
          let elem = document.getElementById('myUL');
          console.log(elem);
          elem.parentNode.removeChild(elem);     
          });
     }
});

  input.addEventListener("keypress", function(event) {
    // Number 13 is the "Enter" key on the keyboard
    if (event.keyCode === 13) {
      // Trigger the button element with a click
      document.getElementById("addBtn").click();
  }
 });

#input {
  width: 400px;
  height: 40px;
  margin-left: 30px;
}

button {
  height: 46px;
  width: 50px;
  position: relative;
  bottom: 8px;
}

#myUL li {
  list-style:none;
  width: 397px;
  height: 30px;
  margin-top: 10px;
  position: relative;
  right: 10px;
  padding-top: 15px;
  padding-left: 10px;
  border: 0.5px solid black;
}

.listBtn {
  position: relative;
  left: 401px;
  bottom: 46px
}

<input type = "text" id = "input" placeholder="Write here">

<button id = "addBtn" >Add item</button>

<ul id = "myUL">

</ul>

还必须添加一个唯一的ID，该ID可以对应于for循环的索引，以删除所选的元素。

Answer 3

从我的角度来看，创建按钮后立即使用listBtn.addEventListener();添加此EventListener会容易得多。否则，脚本会在页面加载时运行，并且找不到任何匹配项。

适应以下功能，以便每个按钮都具有删除列表中相应项目的功能！

编辑：我再次阅读了您的代码，您无法知道每个列表元素都链接了wich按钮。您的代码当前删除了整个容器。也许尝试为列表元素和相应的按钮使用ID或容器。

如何删除待办事项清单中的清单项目

3 个答案: