動態的新增或者刪除指定元素程式碼例項
本章節介紹一段程式碼例項,能夠動態的新增或者刪除指定的元素,這裡不管實際應用中此程式碼出現的概率有多大,只在於如何實現類似的功能,程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!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.parent()函式可以參閱jQuery parent()一章節。
3.remove()函式可以參閱jQuery remove()一章節。
相關文章
- html元素的動態新增和刪除程式碼例項HTML
- javascript動態刪除或者新增table表格行程式碼例項JavaScript行程
- jquery刪除指定元素程式碼例項jQuery
- jquery刪除指定子元素程式碼例項jQuery
- javascript刪除指定子元素程式碼例項JavaScript
- js刪除指定的li元素程式碼例項JS
- JavaScript動態新增或者刪除HTML元素JavaScriptHTML
- javascript刪除或者新增option選項例項程式碼JavaScript
- 刪除陣列中的指定元素例項程式碼陣列
- 動態刪除和新增table行程式碼例項行程
- javascript新增或者刪除table表格行程式碼例項JavaScript行程
- jQuery實現的刪除指定子元素程式碼例項jQuery
- jquery為指定的元素新增或者刪除指定樣式類jQuery
- javascript動態刪除和新增表格行程式碼例項JavaScript行程
- jQuery新增或者刪除class樣式類程式碼例項jQuery
- jquery動態新增li元素程式碼例項jQuery
- js動態新增和刪除table表格行程式碼例項JS行程
- js動態建立table表格和刪除指定行列程式碼例項JS
- 點選刪除或者新增表格行簡單程式碼例項
- jQuery新增和刪除元素class屬性例項程式碼jQuery
- js刪除li元素程式碼例項JS
- jQuery刪除表格指定行程式碼例項jQuery行程
- JavaScript刪除元素節點程式碼例項JavaScript
- JavaScript 動態新增與刪除元素JavaScript
- javascript刪除指定索引的陣列程式碼例項JavaScript索引陣列
- JavaScript 陣列新增或者刪除元素JavaScript陣列
- javascript刪除陣列指定值程式碼例項JavaScript陣列
- jquery新增或者刪除select下拉選單項程式碼jQuery
- JavaScript動態新增和刪除div元素JavaScript
- javascript如何動態新增和刪除元素JavaScript
- jQuery實現的刪除指定標籤程式碼例項jQuery
- javascript獲取和刪除指定cookie程式碼例項JavaScriptCookie
- css匹配指定元素的子元素程式碼例項CSS
- javascript動態建立元素程式碼例項JavaScript
- javascript如何動態刪除或者新增物件屬性JavaScript物件
- javascript刪除陣列重複元素程式碼例項JavaScript陣列
- js刪除陣列重複元素程式碼例項JS陣列
- javascript按照值刪除陣列元素程式碼例項JavaScript陣列