jQuery實現(xiàn)動態(tài)添加和刪除input框代碼實例

更新時間：2019年03月29日 11:58:09 作者：賴木子

這篇文章主要介紹了jQuery實現(xiàn)動態(tài)添加和刪除input框，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

本文實例為大家分享了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)達到最大
				$("#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)站的支持！

您可能感興趣的文章:

相關(guān)文章

jQuery的:parent選擇器定義和用法
jQuery的:parent選擇器匹配含有子元素或者文本的元素，空格也算是含有的元素，下面有幾個示例，大家可以學習下
2014-07-07
jQuery大于號(>)選擇器的作用解釋
這篇文章主要介紹了jQuery大于號(>)選擇器的作用解釋,本文用代碼實例講解jQuery大于號的作用,需要的朋友可以參考下
2015-01-01
js實現(xiàn)圖片放大縮小功能后進行復雜排序的方法
這是一個基于jquery的圖片效果，它的作用是：當圖片點擊變大(變小)時，其它圖片按照一定的規(guī)則進行排序運動
2012-11-11
jquery模擬實現(xiàn)鼠標指針停止運動事件
這篇文章主要介紹了jquery模擬實現(xiàn)鼠標指針停止運動事件示例代碼，感興趣的小伙伴們可以參考一下
2016-01-01
AJAX分頁的代碼(后臺asp.net)
查詢功能是開發(fā)中最重要的一個功能，大量數(shù)據(jù)的顯示，我們用的最多的就是分頁。
2011-02-02
jquery append 動態(tài)添加的元素事件on 不起作用的解決方案
這篇文章主要介紹了jquery append 動態(tài)添加的元素事件on 不起作用的解決方案,需要的朋友可以參考下
2015-07-07
jQuery的Ajax時無響應(yīng)數(shù)據(jù)的解決方法
今天做項目時發(fā)現(xiàn)永遠響應(yīng)的值都是該頁面的html代碼。
2010-05-05
JQuery 操作Javascript對象和數(shù)組的工具函數(shù)小結(jié)
JQuery提供了很多實用的工具函數(shù)。這些函數(shù)主要分為兩類，操作集合數(shù)組的函數(shù)和非集合數(shù)組函數(shù)。
2010-01-01
jQuery UI 實例講解 - 日期選擇器(Datepicker)
下面小編就為大家?guī)硪黄猨Query UI 實例講解 - 日期選擇器(Datepicker)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09
jQuery制作網(wǎng)頁版選項卡
這篇文章主要為大家詳細介紹了jQuery制作網(wǎng)頁版選項卡的相關(guān)方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-07-07