jQuery实现动态添加、删除按钮及input输入框的方法


Posted in jQuery onApril 27, 2017

本文实例讲述了jQuery实现动态添加、删除按钮及input输入框的方法。分享给大家供大家参考,具体如下:

<html>
<head>
<meta charset="utf-8">
<title>动态创建按钮</title>
<script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js'></script>
</head>
<body>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="AddMoreFileBox" class="btn btn-info">添加更多的input输入框</a></span></p>
<div id="InputsWrapper">
<div><input type="text" name="mytext[]" id="field_1" value="Text 1"/><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="removeclass"><input type='button' value='删除'></a></div>
</div>
<script>
$(document).ready(function() {
var MaxInputs    = 8; //maximum input boxes allowed
var InputsWrapper  = $("#InputsWrapper"); //Input boxes wrapper ID
var AddButton    = $("#AddMoreFileBox"); //Add button ID
var x = InputsWrapper.length; //initlal text box count
var FieldCount=1; //to keep track of text box added
$(AddButton).click(function (e) //on add input button click
{
    if(x <= MaxInputs) //max input box allowed
    {
      FieldCount++; //text box added increment
      //add input box
      $(InputsWrapper).append('<div><input type="text" name="mytext[]" id="field_'+ FieldCount +'" value="Text '+ FieldCount +'"/><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="removeclass"><input type="button" value="删除"></a></div>');
      x++; //text box increment
    }
return false;
});
$("body").on("click",".removeclass", function(e){ //user click on remove text
    if( x > 1 ) {
        $(this).parent('div').remove(); //remove text box
        x--; //decrement textbox
    }
return false;
})
});
</script>
</body>
</html>

运行效果图如下:

jQuery实现动态添加、删除按钮及input输入框的方法

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
JQuery实现图片轮播效果
May 08 jQuery
各种选择框jQuery的选中方法(实例讲解)
Jun 27 jQuery
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
jQuery实现图片简单轮播功能示例
Aug 13 jQuery
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
如何基于jQuery实现五角星评分
Sep 02 jQuery
jquery实现简单每周轮换的日历
Sep 10 jQuery
jQuery实现放大镜案例
Oct 19 jQuery
jquery ui sortable拖拽后保存位置
Apr 27 #jQuery
jquery 禁止鼠标右键并监听右键事件
Apr 27 #jQuery
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 #jQuery
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 #jQuery
jQuery使用正则验证15/18身份证的方法示例
Apr 27 #jQuery
jQuery鼠标悬停内容动画切换效果
Apr 27 #jQuery
使用jQuery,Angular实现登录界面验证码详解
Apr 27 #jQuery
You might like
PHP 中使用explode()函数切割字符串为数组的示例
2017/05/06 PHP
JavaScript中“基本类型”之争小结
2013/01/03 Javascript
原生js实现半透明遮罩层效果具体代码
2013/06/06 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
2014/01/22 Javascript
jquery $(&quot;#variable&quot;) 循环改变variable的值示例
2014/02/23 Javascript
javascript中使用正则计算中文长度的例子
2014/04/29 Javascript
jquery 仿锚点跳转到页面指定位置的实例
2017/02/14 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
2017/04/07 Javascript
JS ES6中setTimeout函数的执行上下文示例
2017/04/27 Javascript
基于vue.js 2.x的虚拟滚动条的示例代码
2018/01/23 Javascript
vue实现的上传图片到数据库并显示到页面功能示例
2018/03/17 Javascript
nodeJS模块简单用法示例
2018/04/21 NodeJs
Nodejs使用Mongodb存储与提供后端CRD服务详解
2018/09/04 NodeJs
vue加载完成后的回调函数方法
2018/09/07 Javascript
[02:49]2018DOTA2亚洲邀请赛主赛事决赛日战况回顾 Mineski鏖战5局夺得辉耀
2018/04/10 DOTA
Python中列表和元组的相关语句和方法讲解
2015/08/20 Python
详解Python中的__new__、__init__、__call__三个特殊方法
2016/06/02 Python
python traceback捕获并打印异常的方法
2018/08/31 Python
Python实现的对本地host127.0.0.1主机进行扫描端口功能示例
2019/02/15 Python
使用python写的opencv实时监测和解析二维码和条形码
2019/08/14 Python
python批量处理文件或文件夹
2020/07/28 Python
python3-flask-3将信息写入日志的实操方法
2019/11/12 Python
python使用正则表达式去除中文文本多余空格,保留英文之间空格方法详解
2020/02/11 Python
解决pyinstaller打包运行程序时出现缺少plotly库问题
2020/06/02 Python
Python 爬取淘宝商品信息栏目的实现
2021/02/06 Python
北美女性服装零售连锁店:maurices
2019/06/12 全球购物
linux面试题参考答案(8)
2016/04/19 面试题
《都江堰》教学反思
2014/02/07 职场文书
合作意向书范本
2014/03/31 职场文书
教师敬业奉献模范事迹材料
2014/05/18 职场文书
2015年五四青年节活动总结
2015/02/10 职场文书
房贷收入证明范本
2015/06/12 职场文书
党性修养心得体会2016
2016/01/21 职场文书
2016年第29个世界无烟日宣传活动总结
2016/04/06 职场文书
长辈生日祝福语大全(72句)
2019/08/09 职场文书
HTML5来实现本地文件读取和写入的实现方法
2021/05/25 HTML / CSS