Need help to delete specific li element of my to do list

#1

Hello guys my first post on this forum not sure about the rule. I am trying to create a to do app. so far i am able to add item but i dont how to remove an specific item of my list

function createlist(){
  var li = document.createElement("li");
  var bt = document.createElement("button");
  bt.appendChild(document.createTextNode("X"));
  li.appendChild(document.createTextNode(input.value));
  ul.appendChild(li);
  ul.appendChild(bt);
  bt.addEventListener("click",function(){
    let item = this.parentElement;
    item.style.display = "none";
  });

The above code hide the entire list but i want to hide the specific list. I would also like to know how can i delete the item insted of hiding the element

#2

Hi @Deepak8717.

First of all, welcome to the forum :slight_smile:

Now, if you use jQuery there are some easy methods to do that, as well as leaving the element but deleting its children.
Take a look at remove() and empty() here: https://api.jquery.com/category/manipulation/dom-removal/

If, instead, you want to use the good old JavaScript you can:

  1. Select the element with let element = document.querySelector("#idOfTheElement");
  2. Go to its parent and delete the child element that correspond to what you selected earlier element.parentNode.removeChild(element);

Happy coding!

Edit: just be aware that, sadly, not all the browser support querySelector. Some browser companies still live in the stone age :roll_eyes:

#3