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 相关文章推荐
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 jQuery
Jquery获取radio选中的值
May 05 jQuery
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 jQuery
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
jQuery:unbind方法的使用详解
Aug 14 jQuery
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
jquery实现搜索框功能实例详解
Jul 23 jQuery
jQuery实现高级检索功能
May 28 jQuery
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 jQuery
JQuery常用选择器功能与用法实例分析
Dec 23 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
SONY SRF-M100的电路分析
2021/03/02 无线电
ThinkPHP的RBAC(基于角色权限控制)深入解析
2013/06/17 PHP
jquery 常用操作整理 基础入门篇
2009/10/14 Javascript
为指定的元素添加遮罩层的示例代码
2014/01/15 Javascript
jQuery实现HTML5 placeholder效果实例
2014/12/09 Javascript
jQuery实现为图片添加镜头放大效果的方法
2015/06/25 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
2016/08/01 Javascript
bootstrap table小案例
2016/10/21 Javascript
js实现各种复制到剪贴板的方法(分享)
2016/10/27 Javascript
关于laydate.js加载laydate.css路径错误问题解决
2017/12/27 Javascript
完美解决axios在ie下的兼容性问题
2018/03/05 Javascript
解决layui中table异步数据请求不支持自定义返回数据格式的问题
2018/08/19 Javascript
用Cordova打包Vue项目的方法步骤
2019/02/02 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
2019/05/30 Javascript
基于原生js实现判断元素是否有指定class名
2020/07/11 Javascript
记一次vue跨域的解决
2020/10/21 Javascript
javascript实现简单页面倒计时
2021/03/02 Javascript
Python实现破解猜数游戏算法示例
2017/09/25 Python
对pycharm代码整体左移和右移缩进快捷键的介绍
2018/07/16 Python
python调用百度REST API实现语音识别
2018/08/30 Python
django项目登录中使用图片验证码的实现方法
2019/08/15 Python
Python中__repr__和__str__区别详解
2019/11/07 Python
PyTorch中的padding(边缘填充)操作方式
2020/01/03 Python
如何真正的了解python装饰器
2020/08/14 Python
常用的四种CSS透明属性介绍
2014/04/12 HTML / CSS
HTML5中使用json对象的实例代码
2018/09/10 HTML / CSS
Michael Kors加拿大官网:购买设计师手袋、手表、鞋子、服装等
2019/03/16 全球购物
大学生全国两会报告感想
2014/03/17 职场文书
计算机应用专业毕业生求职信
2014/06/03 职场文书
党的群众路线对照检查材料范文
2014/09/24 职场文书
教师工作总结范文2014
2014/11/10 职场文书
岳庙导游词
2015/02/04 职场文书
二审答辩状范文
2015/05/22 职场文书
2015秋季新学期开学寄语
2015/05/28 职场文书
Rhit高效可视化Nginx日志查看工具
2021/11/01 Servers
Redis 异步机制
2022/05/15 Redis