jQuery實現(xiàn)動態(tài)添加和刪除input框代碼實例
更新時間:2019年03月29日 11:58:09 作者:賴木子
這篇文章主要介紹了jQuery實現(xiàn)動態(tài)添加和刪除input框,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
本文實例為大家分享了jQuery實現(xiàn)動態(tài)添加和刪除input框的具體代碼,供大家參考,具體內(nèi)容如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>選項</title> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script> $(function(){ // 添加選項 $("#opbtn").click(function(){ if($("#opts>li").size() < 6){// 最多添加6個選項 $("#opts").append("<li><input /></li>"); }else{// 提示選項個數(shù)已經(jīng)達(dá)到最大 $("#optips").html("選項個數(shù)已經(jīng)達(dá)到最大,不能再添加!"); $("#optips").css({"color":"red"}); } }); // 刪除選項 $("#delbtn").click(function(){ if($("#opts>li").size() <= 0){ $("#optips").html("已經(jīng)沒有選項可以刪除了!"); $("#optips").css({"color":"red"}); } else{ // 刪除選項,每次刪除最后一個 $("#opts>li").last().remove(); } }); }); </script> <style> *{ margin: 0px; padding: 0px; } #dv{ width: 100px; height: 100px; background-color: yellow; margin: 0px auto 0px; } </style> </head> <body> <div style="margin: 50px;"> <input id="opbtn" type="button" value="添加選項"/> <input id="delbtn" type="button" value="刪除選項"/> <input id="wrapbtn" type="button" value="包圍DIV"/> <ol id="opts" type="A"></ol> <!-- 提示語 --> <span id="optips"></span> </div> </body> </html>
以上所述是小編給大家介紹的jQuery實現(xiàn)動態(tài)添加和刪除input框,詳解整合,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
您可能感興趣的文章:
- jQuery ajax仿Google自動提示SearchSuggess功能示例
- JQueryDOM之樣式操作
- 淺談JS和jQuery的區(qū)別
- jQuery實現(xiàn)動態(tài)添加和刪除input框?qū)嵗a
- jQuery添加新內(nèi)容的四個常用方法分析【append,prepend,after,before】
- 簡單易擴(kuò)展可控性強(qiáng)的Jquery轉(zhuǎn)盤抽獎程序
- 詳解jQuery-each()方法
- 使用jquery的cookie實現(xiàn)登錄頁記住用戶名和密碼的方法
- Jquery的autocomplete插件用法及參數(shù)講解
- jQuery事件blur()方法的使用實例講解
相關(guān)文章
解決jquery操作checkbox火狐下第二次無法勾選問題
在工作中使用jquery操作checkbox,進(jìn)行全選、反選,現(xiàn)在的問題是火狐下第二次無法勾選問題,在下面有個詳細(xì)的解答,感興趣的朋友可以參考下2014-02-02jquery刪除指定的html標(biāo)簽并保留標(biāo)簽內(nèi)文本內(nèi)容的方法
有時我們希望刪除這段html代碼里面的一對<p>標(biāo)簽,但是要保持里面的內(nèi)容不被刪除,本文提供的這個jquery方法就可以簡單實現(xiàn)。2014-04-04Jquery 動態(tài)循環(huán)輸出表格具體方法
這篇文章主要介紹了Jquery 動態(tài)循環(huán)輸出表格具體方法,有需要的朋友可以參考一下2013-11-11jQuery)擴(kuò)展jQuery系列之一 模擬alert,confirm(一)
很多人都為了使alert系統(tǒng)的調(diào)用函數(shù)在自己的控制范圍之內(nèi),都選擇了去封裝一個屬于自己的alert組件,現(xiàn)在我們就動手實現(xiàn)一個這樣的小部件。2010-12-12