How do I make the x button to actually remove the li

November 28, 2022

Got this code, it does what I need it to do, but only the button cancel button doesn’t work, I want it to remove the whole part of the list

I’ve been struggling, experimenting with whatever I could but nothing helped and I just don’t know

My html:

let myNodelist = document.getElementsByTagName("LI");
let i;
let close = document.getElementsByClassName("close");

function newTask() {
  let li = document.createElement("li");
  let value = document.getElementById("myinput").value;
  let t = document.createTextNode(value);
  li.appendChild(t);
  if (value === '') {
    alert("You must write something!");
  } else {
    document.getElementById("list").appendChild(li);
  }
  document.getElementById("myinput").value = "";

  let button = document.createElement("button");
  let text = document.createTextNode("\u00D7");
  button.className = "close";
  button.appendChild(text);
  li.appendChild(button);

  for (i = 0; i < close.length; i++) {
    close[i].onclick = () => {
      var div = parentElement;
      div.style.display = "none";
    }
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="uloha.css">
  <script src="app.js"></script>
</head>

<body>
  <div class="task" id="task">
    <h1>To-do list</h1>
    <input type="text" , id="myinput" , placeholder="Task">
    <button onclick="newTask()" type="button" , class="button" id="button"> Add</button>
  </div>
  <ul id="list">
  </ul>
</body>

</html>

>Solution :

One solution is event delegation. Instead of using onclick in a loop attaching new event handlers every time, just delegate the event to the body. Also, parentElement isn’t an object and you aren’t referencing the parent of the button anyway.

let myNodelist = document.getElementsByTagName("LI");
let i;
let close = document.getElementsByClassName("close");

function newTask() {
  let li = document.createElement("li");
  let value = document.getElementById("myinput").value;
  let t = document.createTextNode(value);
  li.appendChild(t);
  if (value === '') {
    alert("You must write something!");
  } else {
    document.getElementById("list").appendChild(li);
  }
  document.getElementById("myinput").value = "";

  let button = document.createElement("button");
  let text = document.createTextNode("\u00D7");
  button.className = "close";
  button.appendChild(text);
  li.appendChild(button);
}

document.body.addEventListener("click", (e) => {
  let el = e.target;
  if (el.classList.contains("close")) {
    el.parentNode.style.display = "none";
  }
});

<div class="task" id="task">
  <h1>To-do list</h1>
  <input type="text" , id="myinput" , placeholder="Task">
  <button onclick="newTask()" type="button" , class="button" id="button"> Add</button>
</div>
<ul id="list">
</ul>