从 Todo 应用项目中删除项目

Posted

技术标签:

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

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

    添加项目 每个项目都应该有一个删除按钮 如果我们点击一​​个项目，它应该被划掉 如果我们点击特定项目的删除按钮，该项目应该被删除。

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

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 看看我的回答。 【参考方案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。 如果你点击删除，删除线而不是删除，如果没有删除线是一个很酷的功能，但不是任务。

以上是关于从 Todo 应用项目中删除项目的主要内容，如果未能解决你的问题，请参考以下文章

Kotlin Compose Todo小项目 删除添加项目 ，认识状态提升

从 SQLite 数据库中删除所有已完成的项目

无法使用 Ruby on rails 删除表中的项目

从零入门 HTMLCSSJSReact，构建 ToDo 待办事项管理项目！

如何让PyCharm在docstrings中找到Todo项目

todo 小案例