javascript – 從Todo應(yīng)用程序項目中刪除項目

印度阿三17 2019-06-07

展開全文

我正在嘗試我的第一個學習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>

來源：http://www./content-1-228951.html