从 Todo 应用项目中删除项目

【问题标题】：Deleting an item from the Todo app project从 Todo 应用项目中删除项目
【发布时间】：2018-12-02 16:46:21
【问题描述】：

我正在尝试我的第一个学习 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>

【问题讨论】：

  • 尝试在您的事件监听器中添加console.log并检查您的控制台以验证是否正确的事件监听器在您的li点击时被调用。
  • 点击删除按钮时如何删除元素？ deleteListElement() 函数是否正确？
  • @KshitizSharma 看看我的回答。

标签： javascript html css frontend web-frontend


【解决方案1】：

关闭，我添加了一些可能有帮助的 cmets :)

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>

【讨论】：

  • 非常感谢。它完成了这项工作。 :) 这很有帮助。
  • 现在去征服世界：D
【解决方案2】：

您的代码需要如下所示：

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>

【讨论】：

  • 看看我的代码，接受的答案没有标记和删除，它直接删除，如果你没有在输入中输入任何内容，它也会将其添加到列表中。
  • 这是一个很好的代码变体。非常感谢。 :)
  • 你能帮我理解 deleteListtems() 的逻辑吗？
  • 你可以看到deleteListElementis。它要好得多，而且只有 3 行代码。还添加了 cmets。
  • 如果你点击删除，删除线而不是删除，如果没有删除线是一个很酷的功能，但不是任务。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2021-10-19
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-06-02
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode