我正在嘗試我的第一個學(xué)習(xí)javascript的項目.
我正在嘗試制作具有以下功能的待辦事項應(yīng)用程序 –
>添加項目
>每個項目都應(yīng)該有一個刪除按鈕
>如果我們點擊一??個項目,它應(yīng)該被劃掉
>如果我們點擊特定項目的刪除按鈕,則應(yīng)刪除該項目.
我可以部分地實現(xiàn)前兩個和第三個.
我無法通過單擊刪除按鈕刪除相應(yīng)的項目.
我能夠?qū)㈨椖縿澋?但即使單擊刪除按鈕也會發(fā)生.
請幫幫我.
下面給出了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>解決方法:
您的代碼需要如下所示：
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>