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 EasyUI 组件加上清除功能的方法(详解)
Apr 13 jQuery
jQuery+ajax实现局部刷新的两种方法
Jun 08 jQuery
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
jQuery中的for循环var与let的区别
Apr 21 jQuery
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
jQuery轮播图实例详解
Aug 15 jQuery
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
jQuery中getJSON跨域原理的深入讲解
Sep 02 jQuery
jQuery实现二级导航菜单的示例
Sep 30 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
PHP+jquery实时显示网站在线人数的方法
2015/01/04 PHP
CodeIgniter使用smtp服务发送html邮件的方法
2015/06/10 PHP
php搜索文件程序分享
2015/10/30 PHP
PHP实现QQ登录实例代码
2016/01/14 PHP
javascript小数计算出现近似值的解决办法
2010/02/06 Javascript
Javascript中的for in循环和hasOwnProperty结合使用
2013/06/05 Javascript
textarea焦点的用法实现获取焦点清空失去焦点提示效果
2014/05/19 Javascript
深入剖析JavaScript:Object类型
2016/05/10 Javascript
Bootstrap 填充Json数据的实例代码
2017/01/11 Javascript
原生JS实现自定义滚动条效果
2020/10/27 Javascript
jQuery EasyUI Layout实现tabs标签的实例
2017/09/26 jQuery
jQuery实现的简单前端搜索功能示例
2017/10/28 jQuery
jQuery实现的下雪动画效果示例【附源码下载】
2018/02/02 jQuery
JS实现监控微信小程序的原理
2018/06/15 Javascript
详解Angular模板引用变量及其作用域
2018/11/23 Javascript
Python中使用ConfigParser解析ini配置文件实例
2014/08/30 Python
Python中使用第三方库xlrd来写入Excel文件示例
2015/04/05 Python
详解Python中的文本处理
2015/04/11 Python
Python实现SVN的目录周期性备份实例
2015/07/17 Python
一个基于flask的web应用诞生 组织结构调整(7)
2017/04/11 Python
Python实现针对含中文字符串的截取功能示例
2017/09/22 Python
python中将\\uxxxx转换为Unicode字符串的方法
2018/09/06 Python
在python中安装basemap的教程
2018/09/20 Python
python批量修改文件夹及其子文件夹下的文件内容
2019/03/15 Python
CSS3田字格列表的样式编写方法
2018/11/22 HTML / CSS
去加拿大的旅行和假期:Canadian Affair
2016/10/25 全球购物
沙龙级头发造型工具:FOXYBAE
2018/07/01 全球购物
为什么要使用servlet
2016/01/17 面试题
个人自荐信
2013/12/05 职场文书
数控专业个人求职信范文
2014/02/05 职场文书
2014年文学毕业生自我鉴定
2014/04/23 职场文书
水利专业大学生职业生涯规划书范文
2014/09/17 职场文书
初中地理教学反思
2016/02/19 职场文书
浅谈python数据类型及其操作
2021/05/25 Python
基于Redis的List实现特价商品列表功能
2021/08/30 Redis
Debian11 Xfce终端光标的颜色怎么设置?
2022/08/14 数码科技