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