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

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

</html>

CodePudding user response：

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

CodePudding user response：

Try querying off of the event target and locating the closest ancestor of type <LI>.

close[i].onclick = (e) => {
  var li = e.target.closest('li');
  li.style.display = "none";
}

The click handler can now be moved to its own self-contained function. Also, you should just remove the element instead of making it invisible.

function handleRemove(e) {
  e.target.closest('li').remove();
};

Fixed example

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

function handleRemove(e) {
  e.target.closest('li').remove();
};

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 = handleRemove;
  }
}

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

CodePudding user response：

parentElement is undefined. The parentElement is a method of a node. See https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement

You need to change your code to the following assuming you want to hide the parent ul element.


  
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 = li.parentElement;
      div.style.display = "none";
    }
  }
  
}

CodePudding user response：

If you want delete the list get the object, i do it here with example name.

A li element its normally a child from a

Let's say the ul object id is listobject:

function clearList() {
  var ul = document.getElementById("listobject");
  ul.innerHTML = ""
}

And if you want to add single listitems you can do:

function addItem() {
  var ul = document.getElementById("listobject");
  var li = document.createElement("li");
  li.appendChild(document.createTextNode("new item"));
  ul.appendChild(li);
}

Just asign your onclick event from button to the function

Hope that help you Happy coding