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之验证框validatebox实例详解
Apr 10 jQuery
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
jQuery返回定位插件详解
May 15 jQuery
jQuery.form.js的使用详解
Jun 14 jQuery
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
jQuery解析json格式数据示例
Sep 01 jQuery
jquery.pagination.js分页使用教程
Oct 23 jQuery
jQuery实现每日秒杀商品倒计时功能
Sep 06 jQuery
javascript/jquery实现点击触发事件的方法分析
Nov 11 jQuery
jQuery实现的图片点击放大缩小功能案例
Jan 02 jQuery
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 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
360搜索引擎自动收录php改写方案
2018/04/28 PHP
json跟xml的对比分析
2008/06/10 Javascript
Javascript 的addEventListener()及attachEvent()区别分析
2009/05/21 Javascript
javascript或asp实现的判断身份证号码是否正确两种验证方法
2009/11/26 Javascript
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
2012/06/14 Javascript
jQuery实用基础超详细介绍
2013/04/11 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
2015/04/30 Javascript
jquery使用each方法遍历json格式数据实例
2015/05/18 Javascript
JS中关于事件处理函数名后面是否带括号的问题
2016/11/16 Javascript
用户管理的设计_jquery的ajax实现二级联动效果
2017/07/13 jQuery
使用Bootrap和Vue实现仿百度搜索功能
2017/10/26 Javascript
vue下拉列表功能实例代码
2018/04/08 Javascript
详解Axios统一错误处理与后置
2018/09/26 Javascript
vue中axios的二次封装实例讲解
2019/10/14 Javascript
vue 解决异步数据更新问题
2019/10/29 Javascript
vue实现计步器功能
2019/11/01 Javascript
微信小程序12行js代码自己写个滑块功能(推荐)
2020/07/15 Javascript
[01:00:17]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第二场 1月25日
2021/03/11 DOTA
Python中的super用法详解
2015/05/28 Python
python 将md5转为16字节的方法
2018/05/29 Python
Django之Mode的外键自关联和引用未定义的Model方法
2018/12/15 Python
利用Pyhton中的requests包进行网页访问测试的方法
2018/12/26 Python
python网络应用开发知识点浅析
2019/05/28 Python
python 同时读取多个文件的例子
2019/07/16 Python
python中类的输出或类的实例输出为这种形式的原因
2019/08/12 Python
QML使用Python的函数过程解析
2019/09/26 Python
Python any()函数的使用方法
2019/10/28 Python
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
2018/03/21 HTML / CSS
Oracle中delete,truncate和drop的区别
2016/05/05 面试题
工地安全生产标语
2014/06/06 职场文书
保护动物的标语
2014/06/11 职场文书
学校搬迁方案
2014/06/15 职场文书
中学生思想品德评语
2014/12/31 职场文书
商场收银员岗位职责
2015/04/07 职场文书
课文《燕子》教学反思
2016/02/17 职场文书
2022漫威和DC电影上映作品
2022/04/05 欧美动漫