jQuery游戏节点的动态新增和删除的实现

第一步：页面的结构剖析

		

			街机三国删除霸域删除王者农药删除
			

				
			

		

二.CSS 样式设置

*{
	margin:0px;
	padding:0px;
	font-size:12px;
}
#listbox{
	margin:10px;
	padding:15px;
	border:1px solid #CCCCCC;
	color:#0066FF;overflow: auto;
}
dl{
	display:block;
	float:left;	
	margin:15px;
}
dd{
	font-size:14px;
	color:#663300; 
}

dd a{
	text-decoration:none;
	font-size:14px;
	color:#FF3300;
}
dd a:hover{
	text-decoration:underline;
}
.clear{
	clear:both;
	height:0px;
}

三.JQuery代码的实现

//游戏待完善代码
	 //Author:写上你的名字；
	 $(function(){  //加载事件;
		//任务1：先找删除选择器a标签
		 // $(".del").click(function(){
			//  //要明白删除的是哪个选择器对象;删除按钮和要删除对象的关系
			//  //要掌握当前节点和待删除节点的关系；
			//  $(this).parent().parent().remove();
		 // });
		 //动态删除新增节点
		 $(document).on('click', '.del', function () {
		         $(this).parent().parent().remove();
		     });
		 //删除代码结束，其他代码开始
		 $(".add").click(function(){
			 //定义了一个node对象，让它赋值为待增加的html元素；
			 let node=""
					+""
					+"王者农药"
					+"删除"
					+"";
			//当前节点插入到某个节点之前insertBefore(后面节点);
			$(node).insertBefore($(".clear"));
			//$("#listbox").append(node);
		 });
	 })

四.效果展示