Deleting an item from the Todo app project

Question

I am trying my first project for learning javascript. I am trying to make a todo app with following features-

Add an item
Each item should have a delete button
If we click on an item it should be crossed out
If we click on delete button of a specific item, the item should be deleted.

I am able to achieve first two and third one partially. I am not able to delete the corresponding item by clicking on the delete button. I am able to get the item crossed out but it happens even when I click the delete button. Please help me here.

Javascript CSS and HTML snippents are given below

var button= document.getElementById("enter")

var newitem= document.getElementById("userinput");

var ul= document.querySelector("ul");

var list= document.getElementsByTagName("li");

var del= document.getElementsByClassName("delete");
for( var i=0;i<del.length;i++){
 del[i].addEventListener("click", deleteListElement);
}

for(var i=0;i< list.length ;i++){
 list[i].addEventListener("click", liClick);
}


function deleteListElement(){
 this.classList.removeItem;

}

function liClick(){
 this.classList.toggle("done");
}

function inputLength(){
 return newitem.value.length;
}



function createListElement(){
 var li= document.createElement("li");
   li.appendChild(document.createTextNode(newitem.value));
   
   newitem.value=" "
  var delbutt=document.createElement("button");
  delbutt.appendChild(document.createTextNode("Delete"));
  li.appendChild(delbutt);
  ul.appendChild(li);
  li.addEventListener("click", liClick);
    
}

function addListAfterClick(){

 if(inputLength()>0){
  createListElement();
 }
 
}

function addListAfterEnter(event){
 if(inputLength()>0 && event.keyCode===13){

  createListElement()
 }

}


button.addEventListener("click",addListAfterClick );



newitem.addEventListener("keypress", addListAfterEnter);

.done{
 text-decoration: line-through;
}

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
 <h1>Shopping list</h1>
 <p id="first">
  Get it done tody
 </p>
 <p class="second">No Excuses</p>
 <input type="text"  id ="userinput" placeholder="enter items">
 <button id="enter">Enter</button>
 <ul>
  <li class="bold red" random="23">
   Notebook
   <button class="delete">Delete</button>
  </li>
  <li>Jello
   <button class="delete">Delete</button>

  </li>
  <li>Spinach
   <button class="delete">Delete</button>
  </li>
  <li>Birthday
   <button class="delete">Delete</button>

  </li>
  <li>Candles
   <button class="delete">Delete</button>

  </li>
 </ul>



 <script type="text/javascript" src="script.js"></script>

</body>
</html>

Try adding console.log in your event listeners and check your console to verify if proper event listeners get call on click of your li. — Zeeshan Elahi, Jun 23 '18 at 12:09
How do I delete the element when I click the delete button? Is the deleteListElement() function correct? — Kshitiz Sharma, Jun 23 '18 at 12:12

score 5 · Answer 1 · answered Jun 23 '18 at 12:13

Close, i added some comments that may help :)

var button= document.getElementById("enter")

var newitem= document.getElementById("userinput");

var ul= document.querySelector("ul");

var list= document.getElementsByTagName("li");

var del= document.getElementsByClassName("delete");

// register actions initially on existing elements
for( var i=0;i<del.length;i++){
 del[i].addEventListener("click", deleteListElement);
}

for(var i=0;i< list.length ;i++){
 list[i].addEventListener("click", liClick);
}


function deleteListElement(){
  this.parentElement.remove(); // remove parent, since button is child

}

function liClick(){
 this.classList.toggle("done");
}

function inputLength(){
 return newitem.value.length;
}



function createListElement(){
 var li= document.createElement("li");
   li.appendChild(document.createTextNode(newitem.value));
   
   newitem.value=" "
  var delbutt=document.createElement("button");
  delbutt.appendChild(document.createTextNode("Delete"));
  li.appendChild(delbutt);
  ul.appendChild(li);
  
  // Register action on newly added elements
  li.addEventListener("click", liClick);
  delbutt.addEventListener("click", deleteListElement);
    
}

function addListAfterClick(){

 if(inputLength()>0){
  createListElement();
 }
 
}

function addListAfterEnter(event){
 if(inputLength()>0 && event.keyCode===13){

  createListElement()
 }

}

button.addEventListener("click",addListAfterClick );
newitem.addEventListener("keypress", addListAfterEnter);

.done{
 text-decoration: line-through;
}

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
 <h1>Shopping list</h1>
 <p id="first">
  Get it done tody
 </p>
 <p class="second">No Excuses</p>
 <input type="text"  id ="userinput" placeholder="enter items">
 <button id="enter">Enter</button>
 <ul>
  <li class="bold red" random="23">
   Notebook
   <button class="delete">Delete</button>
  </li>
  <li>Jello
   <button class="delete">Delete</button>

  </li>
  <li>Spinach
   <button class="delete">Delete</button>
  </li>
  <li>Birthday
   <button class="delete">Delete</button>

  </li>
  <li>Candles
   <button class="delete">Delete</button>

  </li>
 </ul>



 <script type="text/javascript" src="script.js"></script>

</body>
</html>

Thank you very much. It does the job. :) It was very helpful. — Kshitiz Sharma, Jun 23 '18 at 12:17

Inus Saha · Accepted Answer · 2018-06-25T09:01:03.217

your code needs to be like the following:

var button= document.getElementById("enter")

var newitem= document.getElementById("userinput");

var ul= document.querySelector("ul");

var list= document.getElementsByTagName("li");

var del= document.getElementsByClassName("delete");
for( var i=0;i<del.length;i++){
 del[i].addEventListener("click", deleteListElement);
}

for(var i=0;i< list.length ;i++){
 list[i].addEventListener("click", liClick);
}


function deleteListElement(){
  //remove the parent of button from its grand parent
  this.parentNode.parentNode.removeChild(this.parentNode);
}

function liClick(){
 this.classList.toggle("done");
}

function inputLength(){
 return newitem.value.length;
}



function createListElement(){
  if(!newitem.value.trim()){
    alert('You must enter a value');
    return;
  }
  var li= document.createElement("li");
  li.appendChild(document.createTextNode(newitem.value));

  newitem.value=" "
  var delbutt=document.createElement("button");
  delbutt.appendChild(document.createTextNode("Delete"));
  li.appendChild(delbutt);
  ul.appendChild(li);
  delbutt.addEventListener("click",deleteListElement);
  li.addEventListener("click", liClick);
    
}

function addListAfterClick(){

 if(inputLength()>0){
  createListElement();
 }
 
}

function addListAfterEnter(event){
 if(inputLength()>0 && event.keyCode===13){

  createListElement()
 }

}


button.addEventListener("click",addListAfterClick );



newitem.addEventListener("keypress", addListAfterEnter);

.done{
 text-decoration: line-through;
}

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
 <h1>Shopping list</h1>
 <p id="first">
  Get it done tody
 </p>
 <p class="second">No Excuses</p>
 <input type="text"  id ="userinput" placeholder="enter items">
 <button id="enter">Enter</button>
 <ul>
  <li class="bold red" random="23">
   Notebook
   <button class="delete">Delete</button>
  </li>
  <li>Jello
   <button class="delete">Delete</button>

  </li>
  <li>Spinach
   <button class="delete">Delete</button>
  </li>
  <li>Birthday
   <button class="delete">Delete</button>

  </li>
  <li>Candles
   <button class="delete">Delete</button>

  </li>
 </ul>



 <script type="text/javascript" src="script.js"></script>

</body>
</html>

Have a look at my code the accepted answer does not mark and delete, it directly deletes and also if you dont enter anything in the input it adds that to the list too. — Inus Saha, Jun 23 '18 at 12:24
That is a nice variation of the code. Thank you very much. :) — Kshitiz Sharma, Jun 23 '18 at 12:50
You can see `deleteListElementis`. its much better and its only 3 lines of code. comments also added. — Inus Saha, Jun 23 '18 at 12:57
That strikethrough instead of delete if you click delete, if not striked throught is a cool feature but was not the task. — SirPilan, Jun 25 '18 at 08:55

Deleting an item from the Todo app project

2 Answers2