从Todo应用项目中删除项目

时间：2018-06-23 11:58:35

标签： javascript html css frontend web-frontend

我正在尝试我的第一个学习javascript的项目。 我正在尝试制作具有以下功能的待办事项应用程序-

  1. 添加项目
  2. 每个项目都应有一个删除按钮
  3. 如果我们单击某个项目，则应将其划掉
  4. 如果我们单击特定项目的删除按钮，则应删除该项目。

我能够部分实现前两个和第三个。 我无法通过单击删除按钮来删除相应的项目。 我能够删除该项目，但是即使单击删除按钮也会发生。 请在这里帮助我。

Javascript CSS和HTML片段在下面给出

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>

2 个答案:

答案 0 :(得分：4)

关闭，我添加了一些评论可能会有所帮助：）

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>

答案 1 :(得分：1)

您的代码必须类似于以下内容：

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>

相关问题
最新问题