JS练习之JS/CSS实现待办事项列表

原文链接： https://c.runoob.com/codedemo/3109

JS练习之JS/CSS实现待办事项列表

实现效果如下图：

HTML代码段

	
我的待办事项
	
	Add



	
Hit the gym
	
Pay bills
	
Meet George
	
Buy eggs
	
repair computer
	
Read a book

CSS代码段

JS段代码

<script>
//在事项条后面添加×号 
var myNodelist = document.getElementsByTagName("li");	//获取所有的li元素
var i;
for(i=0;i<myNodelist.length; i++){
	var span = document.createElement("SPAN");
	var txt = document.createTextNode("\u00D7");	// \u00D7是“×”
	span.className = "close";	//给span添加 class="close"
	span.appendChild(txt);
	myNodelist[i].appendChild(span);
}

//点击×号按钮隐藏该事项
var close=document.getElementsByClassName("close");
var i;
for(i=0;i<close.length;i++){
	close[i].onclick = function(){
		var div = this.parentElement;
		div.style.display = "none";
	}
}

//当点击列表时，在列表前面出现完成标志，再次点击则取消
var list=document.querySelector('ul');
list.addEventListener('click',function(ev){
	if(ev.target.tagName == 'LI'){
		ev.target.classList.toggle('checked');
	}
},false);

//当点击Add按钮时，添加新事项
function newElement(){
	var li = document.createElement("li");
	var inputValue = document.getElementById("myInput").value;
	var t = document.createTextNode(inputValue);
	li.appendChild(t);
	if(inputValue===''){
		alert("您得输入点什么。");
	} else {
		document.getElementById("myUL").appendChild(li);
	}
	document.getElementById("myInput").value = "";	//输入完成并添加成功后清空输入框
	
	var span = document.createElement("SPAN");
	var txt = document.createTextNode("\u00D7");
	span.className = "close";
	span.appendChild(txt);
	li.appendChild(span);
	
	for(i = 0;i < close.length; i++){
		close[i].onclick = function(){
			var div = this.parentElement;
			div.style.display = "none";
		}
	}
}
</script>