javascript - Deleting an item from the Todo app project

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>

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.

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>

Share Improve this question asked Jun 23, 2018 at 11:58 Kshitiz Sharma 7926 gold badges15 silver badges38 bronze badges

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 Commented Jun 23, 2018 at 12:09
How do I delete the element when I click the delete button? Is the deleteListElement() function correct? – Kshitiz Sharma Commented Jun 23, 2018 at 12:12
@KshitizSharma have a look at my answer. – Inus Saha Commented Jun 23, 2018 at 12:27

Add a ment |

2 Answers 2

Sorted by: Reset to default 5

Close, i added some ments 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>

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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Deleting an item from the Todo app project - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)