jQuery实现动态添加和删除input框实例代码


Posted in jQuery onMarch 26, 2019

本文实例为大家分享了jQuery实现动态添加和删除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{// 提示选项个数已经达到最大
				$("#optips").html("选项个数已经达到最大,不能再添加!");
				$("#optips").css({"color":"red"});
			}
			
		});
		
		// 删除选项
		$("#delbtn").click(function(){
			if($("#opts>li").size() <= 0){
				$("#optips").html("已经没有选项可以删除了!");
				$("#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实现动态添加和删除input框详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
May 15 jQuery
jQuery导航条固定定位效果实例代码
May 26 jQuery
基于jquery日历价格、库存等设置插件
Jul 05 jQuery
基于jquery实现多级菜单效果
Jul 25 jQuery
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
jQuery操作事件完整实例分析
Jan 10 jQuery
jquery实现直播视频弹幕效果
Feb 25 jQuery
JQuery表单元素取值赋值方法总结
May 12 jQuery
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 #jQuery
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 #jQuery
详解jQuery-each()方法
Mar 13 #jQuery
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 #jQuery
Jquery的autocomplete插件用法及参数讲解
Mar 12 #jQuery
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 #jQuery
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 #jQuery
You might like
把77A收信机改造成收音机
2021/03/02 无线电
PHP递归复制、移动目录的自定义函数分享
2014/11/18 PHP
php获取当前url地址的方法小结
2017/01/10 PHP
作为PHP程序员你要知道的另外一种日志
2018/07/30 PHP
PHP基于面向对象封装的分页类示例
2019/03/15 PHP
替代window.event.srcElement效果的可兼容性的函数
2009/12/18 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
2014/10/31 Javascript
使用node+vue.js实现SPA应用
2016/01/28 Javascript
谈一谈javascript中继承的多种方式
2016/02/19 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
2016/10/10 Javascript
JS封装的三级联动菜单(使用时只需要一行js代码)
2016/10/24 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
2017/07/31 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
2017/11/28 Javascript
vue2.0+koa2+mongodb实现注册登录
2018/04/10 Javascript
vue里面使用mui的弹出日期选择插件实例
2018/09/16 Javascript
详解Typescript 内置的模块导入兼容方式
2020/05/31 Javascript
js实现随机点名器精简版
2020/06/29 Javascript
解决js中的setInterval清空定时器不管用问题
2020/11/17 Javascript
[55:35]VGJ.S vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
python pickle 和 shelve模块的用法
2013/09/16 Python
python复制文件的方法实例详解
2015/05/22 Python
python发送HTTP请求的方法小结
2015/07/08 Python
django在接受post请求时显示403forbidden实例解析
2018/01/25 Python
Python中装饰器学习总结
2018/02/10 Python
python如何实现数据的线性拟合
2019/07/19 Python
使用WingPro 7 设置Python路径的方法
2019/07/24 Python
pytorch torch.nn.AdaptiveAvgPool2d()自适应平均池化函数详解
2020/01/03 Python
Python递归求出列表(包括列表中的子列表)的最大值实例
2020/02/27 Python
pytorch cuda上tensor的定义 以及减少cpu的操作详解
2020/06/23 Python
可能这些是你想要的H5软键盘兼容方案(小结)
2019/04/23 HTML / CSS
德国机车企业:FC-Moto
2017/10/27 全球购物
暑期政治学习心得体会
2014/09/02 职场文书
2015年医院护理部工作总结
2015/04/23 职场文书
房产电话营销开场白
2015/05/29 职场文书
投诉信范文
2015/07/02 职场文书
党员学习中国梦心得体会
2016/01/05 职场文书