jQuery遊戲節點的動態新增和刪除的實現

第一步：頁面的結構剖析

	<!-- 頁面結構，最外層的是一個div.盒子容器；
	3個單獨的dl,帶有項目和描述的描述列表
	dl的結構：包括一個dt（標題）若干個dd描述；
	兩個目標：
	第一個：刪除功能；刪除遊戲本身；
	第二個：新增遊戲;新增的是一個dl節點,包含了若干的html代碼。
	 -->
 <div id='listbox'>
 	<dl>
    	<dt><img src="images/p1.jpg" /></dt>
        <dd>街機三國</dd>
        <dd><a class='del' href='javascript:void(0);'>刪除</a></dd>
    </dl>
    <dl>
    	<dt><img src="images/p2.jpg" /></dt>
        <dd>霸域</dd>
        <dd><a class='del' href='javascript:void(0);'>刪除</a></dd>
    </dl>
    <dl>
    	<dt><img src="images/p3.jpg" /></dt>
        <dd>王者農藥</dd>
        <dd><a class='del' href='javascript:void(0);'>刪除</a></dd>
    </dl>   
    <div class='clear'></div>
	 <input type="button" value='新增遊戲'  class='add'/>
 </div>

二.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="<dl>"
					+"<dt><img src='images/p4.jpg' /></dt>"
					+"<dd>王者農藥</dd>"
					+"<dd><a class='del' href='javascript:void(0);'>刪除</a></dd>"
					+"</dl>";
			//當前節點插入到某個節點之前insertBefore(後面節點);
			$(node).insertBefore($(".clear"));
			//$("#listbox").append(node);
		 });
	 })

四.效果展示