jQuery實現(xiàn)動態(tài)添加和刪除input框實例代碼
更新時間:2019年03月26日 15:44:31 作者:賴木子
這篇文章主要介紹了jQuery實現(xiàn)動態(tài)添加和刪除input框,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
本文實例為大家分享了jQuery實現(xiàn)動態(tài)添加和刪除input框的具體代碼,供大家參考,具體內容如下
<!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)達到最大 $("#optips").html("選項個數(shù)已經(jīng)達到最大,不能再添加!"); $("#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框詳解整合,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關文章
jquery實現(xiàn)表格中點擊相應行變色功能效果【實例代碼】
下面小編就為大家?guī)硪黄猨query實現(xiàn)表格中點擊相應行變色功能效果【實例代碼】。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考2016-05-05使用jQuery插件創(chuàng)建常規(guī)模態(tài)窗口登陸效果
隱藏模態(tài)窗口技術是一種很好的解決方案,用于處理不是特有必要出現(xiàn)在網(wǎng)頁上的界面元素,下面與大家分享下如何利用jQuery插件leanModal建立一個常規(guī)模態(tài)窗口2013-08-08