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插件Echarts实现的渐变色柱状图
Mar 23 jQuery
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 jQuery
jQuery实现动态删除LI的方法
May 30 jQuery
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 jQuery
jQuery 实时保存页面动态添加的数据的示例
Aug 14 jQuery
jquery实现左右轮播图效果
Sep 28 jQuery
jQuery中extend函数简单用法示例
Oct 11 jQuery
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
Jquery让form表单异步提交代码实现
Nov 14 jQuery
jQuery操作事件完整实例分析
Jan 10 jQuery
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 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
重新封装zend_soap实现http连接安全认证的php代码
2011/01/12 PHP
领悟php接口中interface存在的意义
2013/06/27 PHP
yii2实现 &quot;上一篇,下一篇&quot; 功能的代码实例
2017/02/04 PHP
yii插入数据库防并发的简单代码
2017/05/27 PHP
Javascript 面向对象 重载
2010/05/13 Javascript
jQuery1.6 使用方法二
2011/11/23 Javascript
使用JavaScript 编写简单计算器
2014/11/24 Javascript
javascript使用prototype完成单继承
2014/12/24 Javascript
jQuery实现复选框批量选择与反选的方法
2015/06/17 Javascript
javascript处理a标签超链接默认事件的方法
2015/06/29 Javascript
JS实现霓虹灯文字效果的方法
2015/08/06 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
2015/12/04 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
2015/12/08 Javascript
如何理解jQuery中的ajaxSubmit方法
2017/03/13 Javascript
微信小程序实现分享到朋友圈功能
2018/07/19 Javascript
vue中axios请求的封装实例代码
2019/03/23 Javascript
详解服务端预渲染之Nuxt(介绍篇)
2019/04/07 Javascript
详解Vue-cli3.X使用px2rem遇到的问题
2019/08/09 Javascript
vue 自动化路由实现代码
2019/09/03 Javascript
js实现复制粘贴的两种方法
2020/12/04 Javascript
[38:40]2018DOTA2亚洲邀请赛 4.6淘汰赛 mineski vs LGD 第一场
2018/04/10 DOTA
[51:26]VP vs VG 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python在命令行下使用google翻译(带语音)
2014/01/16 Python
Python遍历目录的4种方法实例介绍
2015/04/13 Python
python使用socket向客户端发送数据的方法
2015/04/29 Python
Python二进制串转换为通用字符串的方法
2018/07/23 Python
在Python中增加和插入元素的示例
2018/11/01 Python
Python-Tkinter Text输入内容在界面显示的实例
2019/07/12 Python
亚马逊印度站:Amazon.in
2017/10/15 全球购物
瑞典时尚服装购物网站:Miinto.se
2017/10/30 全球购物
法国购买二手电子产品网站:Asgoodasnew
2020/03/27 全球购物
给定一个时间点,希望得到其他时间点
2013/11/07 面试题
餐饮收银员岗位职责
2014/02/07 职场文书
餐厅总厨求职信
2014/03/04 职场文书
党员转正党支部意见
2015/06/02 职场文书
高三数学教学反思
2016/02/18 职场文书