動態的添加或者刪除指定元素代碼實例:本章節介紹一段代碼實例，能夠動態的添加或者刪除指定的元素，這裡不管實際應用中此代碼出現的概率有多大，只在於如何實現類似的功能，代碼實例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta na
動態的添加或者刪除指定元素代碼實例:
本章節介紹一段代碼實例，能夠動態的添加或者刪除指定的元素，這裡不管實際應用中此代碼出現的概率有多大，只在於如何實現類似的功能，代碼實例如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> .container{ width:1000px; margin:0 auto; } .top{ height:25px; line-height:25px; } .top select{ width:80px; height:22px; line-height:22px; } .add{line-height:30px;} li{list-style:none;} span{ cursor:pointer; color:red; } </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ $("input").click(function(){ var getval=$("select").val(); $(".add").append('<li>'+getval+'<span>X</span></li>'); }); }); $("span").live("click",function(){ $(this).parent().remove(); }); </script> </head> <body> <div class="container"> <div class="top"> <select> <option>螞蟻部落一</option> <option>螞蟻部落二</option> <option>螞蟻部落三</option> <option>螞蟻部落四</option> <option>螞蟻部落五</option> </select> <input value="查看效果" type="button"/> </div> <div class="add"></div> </div> </body> </html>
上面的代碼中，點擊按鈕可以實現添加一個li元素，li元素中的內容就是選中的option項的文本內容，點擊新添加元素的尾部的紅色叉號，可以刪除當前元素，下麵就介紹一下它的實現過程。
一.代碼註釋:
1.$(function(){})，文檔結構完全載入完畢再去執行函數中的代碼。
2.$("input").click(function(){})，為按鈕註冊click事件處理函數。
3.var getval=$("select").val()，獲取select下拉菜單的value值，也就選中項的value值，如果otpion項沒有規定value屬性值，那麼text文本內容將作為value屬性值。
4.$(".add").append('<li>'+getval+'<span>X</span></li>')，為class屬性值為add的元素追加新的內容。
5.$("span").live("click",function(){})，為span元素註冊click事件處理函數，這裡live函數建議用on替代。
6.$(this).parent().remove()，刪除當前元素的父元素，也就是li元素。
二.相關閱讀:
1.append()函數可以參閱jQuery的append()方法一章節。
2.live()函數可以參閱jQuery的live()函數的用法介紹一章節。
3.parent()函數可以參閱jQuery的parent()方法一章節。
4.remove()函數可以參閱jQuery的remove()方法一章節。
5.on()函數可以參閱jquery的on()、bind()、live()和delegate()區別簡單介紹一章節。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=14451
更多內容可以參閱:http://www.softwhy.com/jquery/
