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实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 jQuery
jQuery接受后台传递的List的实例详解
Aug 02 jQuery
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
jQuery 筛选器简单操作示例
Oct 02 jQuery
jQuery实现可编辑的表格
Dec 11 jQuery
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
Jquery $.map使用方法实例详解
Sep 01 jQuery
jQuery实现影院选座订座效果
Apr 13 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
PHP面向对象三大特点学习(充分理解抽象、封装、继承、多态)
2012/05/07 PHP
解析php下载远程图片函数 可伪造来路
2013/06/25 PHP
destoon调用discuz论坛中带图片帖子的实现方法
2014/08/21 PHP
PHP快速排序quicksort实例详解
2016/09/28 PHP
php+jQuery实现的三级导航栏下拉菜单显示效果
2017/08/10 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
载入进度条 效果
2006/07/08 Javascript
无语,javascript居然支持中文(unicode)编程!
2007/04/12 Javascript
最近项目写了一些js,水平有待提高
2009/01/31 Javascript
JQuery学习笔录 简单的JQuery
2012/04/09 Javascript
javascript解析json数据的3种方式
2014/05/08 Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
2014/06/26 Javascript
js判断移动端是否安装某款app的多种方法
2015/12/18 Javascript
Summernote实现图片上传功能的简单方法
2016/07/11 Javascript
老生常谈Javascript中的原型和this指针
2016/10/09 Javascript
将angular.js项目整合到.net mvc中的方法详解
2017/06/29 Javascript
es6学习之解构时应该注意的点
2017/08/29 Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
2017/11/06 Javascript
通过实例了解Nodejs模块系统及require机制
2020/07/16 NodeJs
Python实现的字典值比较功能示例
2018/01/08 Python
对tf.reduce_sum tensorflow维度上的操作详解
2018/07/26 Python
基于Django统计博客文章阅读量
2019/10/29 Python
python 实现多维数组(array)排序
2020/02/28 Python
Python 实现简单的客户端认证
2020/07/29 Python
加拿大票务网站:Ticketmaster加拿大
2017/07/17 全球购物
YesBabyOnline美国:全球性的在线婚纱礼服工厂
2018/05/05 全球购物
Clos19英国:高档香槟、葡萄酒和烈酒在线购物平台
2020/07/10 全球购物
企业厂长岗位职责
2013/12/17 职场文书
校园报刊亭的创业计划书
2014/01/02 职场文书
运动会入场词60字
2014/02/15 职场文书
群众路线领导干部个人对照检查材料(集锦)
2014/09/23 职场文书
2016大学生毕业实习心得体会
2016/01/23 职场文书
MySQL数据库超时设置配置的方法实例
2021/10/15 MySQL
业余无线电通联Q语
2022/02/18 无线电
Java Lambda表达式常用的函数式接口
2022/04/07 Java/Android