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


Posted in jQuery onMarch 29, 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 Validate表单验证插件实现代码
Jun 08 jQuery
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
jQuery DOM节点的遍历方法小结
Aug 15 jQuery
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
jQuery实现列表的增加和删除功能
Jun 14 jQuery
解决jquery有正确返回值但不执行success函数的问题
Aug 20 jQuery
jquery层次选择器的介绍
Jan 18 jQuery
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
如何使用jQuery操作Cookies方法解析
Sep 08 jQuery
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 #jQuery
JQueryDOM之样式操作
Mar 27 #jQuery
浅谈JS和jQuery的区别
Mar 27 #jQuery
jQuery实现动态添加和删除input框实例代码
Mar 26 #jQuery
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 #jQuery
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 #jQuery
详解jQuery-each()方法
Mar 13 #jQuery
You might like
利用Memcached在php下实现session机制 替换PHP的原生session支持
2010/08/21 PHP
PHP实现时间轴函数代码
2011/10/08 PHP
php自定义分页类完整实例
2015/12/25 PHP
支付宝服务窗API接口开发php版本
2016/07/20 PHP
jQuery中click事件用法实例
2014/12/26 Javascript
javascript定时器完整实例
2015/02/10 Javascript
提升jQuery的性能需要做好七件事
2016/01/11 Javascript
轻松实现javascript图片轮播特效
2016/01/13 Javascript
非常漂亮的相册集 使用jquery制作相册集
2016/04/28 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
2016/07/01 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
2018/10/10 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
2019/02/22 Javascript
Vue动态生成表格的行和列
2019/07/18 Javascript
Vue.js如何使用Socket.IO的示例代码
2019/09/05 Javascript
python利用拉链法实现字典方法示例
2017/03/25 Python
python字典DICT类型合并详解
2017/08/17 Python
Python爬虫使用Selenium+PhantomJS抓取Ajax和动态HTML内容
2018/02/23 Python
python3 pandas 读取MySQL数据和插入的实例
2018/04/20 Python
Django进阶之CSRF的解决
2018/08/01 Python
python程序变成软件的实操方法
2019/06/24 Python
python随机数分布random均匀分布实例
2019/11/27 Python
HTML5 CSS3新的WEB标准和浏览器支持
2009/07/16 HTML / CSS
关于HTML5的22个初级技巧(图文教程)
2012/06/21 HTML / CSS
新加坡网上美容店:Hermo新加坡
2019/06/19 全球购物
俄罗斯第一家篮球店:StreetBall
2020/07/30 全球购物
荷兰浴室和卫浴网上商店:Badkamerxxl.nl
2020/10/06 全球购物
中药专业大学生医药工作求职信
2013/10/25 职场文书
物流管理专业应届生求职信
2013/11/21 职场文书
公安学专业求职信
2014/07/27 职场文书
销售员态度差检讨书
2014/10/26 职场文书
小学班主任事迹材料
2014/12/17 职场文书
计划生育工作总结2015
2015/04/03 职场文书
安全教育第一课观后感
2015/06/17 职场文书
导游词之澳门玫瑰圣母堂
2019/12/03 职场文书
Vue图片裁剪组件实例代码
2021/07/02 Vue.js
css filter和getUserMedia的联合使用
2022/02/24 HTML / CSS