最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin0浏览0评论

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

  1. Add an item
  2. Each item should have a delete button
  3. If we click on an item it should be crossed out
  4. 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-

  1. Add an item
  2. Each item should have a delete button
  3. If we click on an item it should be crossed out
  4. 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>

Share Improve this question asked Jun 23, 2018 at 11:58 Kshitiz SharmaKshitiz Sharma 7926 gold badges15 silver badges38 bronze badges 3
  • 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

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>

发布评论

评论列表(0)

  1. 暂无评论