从 Todo 应用程序项目中删除项目

Question

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

Answer 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");

// 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>

Answer 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>

从 Todo 应用程序项目中删除项目

Deleting an item from the Todo app project

html

javascript

css

frontend

web-frontend