How to remove list item in to-do list

Question

noobie here. I've been coding a to-do list and can't figure out how to get it to recognize the listBtn button which appears with each new list item. As I understand it, the button is undefined because it doesn't exist initially. I've tried to accommodate this with the if statement if (listBtn !== null || listBtn !== undefined), but it still isn't working. Can you help? The offending code is below:

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

when the page load you are trying to find a button that doesn't exist yet because you're creating it when the "add button" is hit

the solution is to move the part where you are selecting your button to add an event to it

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

into your for loop

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

I made a little recatoring in your code hope this will help

  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

The script is executed when the page is loaded, so you will never find that element at the begining because is created later. What you have to do is add the event listener when you create your element.

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>

Also you have to add an unique id that can correspond to the index of the for loop to remove the element you selected.

Answer 3

The way I see it, it would be much easier to add this EventListener using listBtn.addEventListener(); right after you created the button. Other way, the script is ran when the page is loaded and it wont find any match.

Adapt the following function so every button has his function that deletes the corresponding item of your list !

EDIT : I've read over your code once again and you have no way of knowing wich button is linked with each list element. Your code currently delete the whole container. Maybe try using an ID or a container for your list element and the corresponding button.