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实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
简单实现jquery隔行变色
Nov 09 jQuery
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
使用jQuery 操作table 完成单元格合并的实例
Dec 27 jQuery
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
基于 jQuery 实现键盘事件监听控件
Apr 04 jQuery
jquery+php后台实现省市区联动功能示例
May 23 jQuery
jquery html添加元素/删除元素操作实例详解
May 20 jQuery
jQuery实现动态向上滚动
Dec 21 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
关于我转生变成史莱姆这档事:第二季PV上线,萌王2021年回归
2020/05/06 日漫
模拟OICQ的实现思路和核心程序(二)
2006/10/09 PHP
php post大量数据时发现数据丢失问题解决方法
2015/06/20 PHP
PHP7扩展开发教程之Hello World实现方法示例
2017/08/03 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
10个实用的脚本代码工具
2010/05/04 Javascript
JS 类型转换常见方法小结
2010/05/31 Javascript
原生JS实现加入收藏夹的代码
2013/10/24 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
2015/03/13 Javascript
基于JavaScript实现动态添加删除表格的行
2016/02/01 Javascript
javascript拖拽效果延伸学习
2016/04/04 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
2016/09/06 Javascript
jQuery实现手机版页面翻页效果的简单实例
2016/10/05 Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
2017/04/18 Javascript
angularjs实现的购物金额计算工具示例
2018/05/08 Javascript
解决layUI的页面显示不全的问题
2019/09/20 Javascript
代码块高亮可复制显示js插件highlight.js+clipboard.js整合
2021/02/15 Javascript
Python装饰器入门学习教程(九步学习)
2016/01/28 Python
一个基于flask的web应用诞生(1)
2017/04/11 Python
python 文件转成16进制数组的实例
2018/07/09 Python
python判断文件是否存在,不存在就创建一个的实例
2019/02/18 Python
Python中断多重循环的思路总结
2019/10/04 Python
python单向循环链表原理与实现方法示例
2019/12/03 Python
python 正则表达式参数替换实例详解
2020/01/17 Python
python使用布隆过滤器的实现示例
2020/08/20 Python
Python文件操作及内置函数flush原理解析
2020/10/13 Python
html5新增的属性和废除的属性简要概述
2013/02/20 HTML / CSS
JAVA中的关键字有什么特点
2014/03/07 面试题
初一地理教学反思
2014/01/16 职场文书
个性发展自我评价
2014/02/11 职场文书
迎国庆演讲稿
2014/09/05 职场文书
反对四风自我剖析材料
2014/10/07 职场文书
党政领导班子群众路线对照检查材料
2014/10/26 职场文书
雨雪天气温馨提示
2015/07/15 职场文书
课程设计感想范文
2015/08/11 职场文书
Python selenium绕过webdriver监测执行javascript
2022/04/12 Python