Как удалить элемент списка в списке дел

Question

noob ie здесь. Я кодировал список дел и не могу понять, как заставить его распознавать кнопку 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);
      });

в ваш для l oop

 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

На мой взгляд, было бы намного проще добавить этот EventListener, используя listBtn.addEventListener(); сразу после создания кнопки. В противном случае сценарий запускается, когда страница загружена, и он не найдет совпадений.

Адаптируйте следующую функцию, чтобы каждая кнопка имела свою функцию, которая удаляет соответствующий элемент вашего списка!

РЕДАКТИРОВАТЬ: Я еще раз прочитал ваш код, и вы не можете узнать, какая кнопка связана с каждым элементом списка. Ваш код в настоящее время удаляет весь контейнер. Возможно, попробуйте использовать идентификатор или контейнер для элемента списка и соответствующей кнопки.

Answer 3

Скрипт выполняется при загрузке страницы, поэтому вы никогда не найдете этот элемент в начале, потому что он создается позже. Что вам нужно сделать, так это добавить прослушиватель событий при создании элемента.

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>

Также вы должны добавить уникальный идентификатор, который может соответствовать индексу для l oop, чтобы удалить выбранный вами элемент.