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实现图片上传前本地预览
Apr 28 jQuery
jQuery操作css样式
May 15 jQuery
jQuery复合事件结合toggle()方法的用法示例
Jun 10 jQuery
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
jQuery操作cookie的示例代码
Jun 05 jQuery
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
jquery实现聊天机器人
Feb 08 jQuery
jquery简易手风琴插件的封装
Oct 13 jQuery
jQuery列表动态增加和删除的实现方法
Nov 05 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生成可点击刷新的验证码简单示例
2016/05/13 PHP
php实现水印文字和缩略图的方法示例
2016/12/29 PHP
phpcms实现验证码替换及phpcms实现全站搜索功能教程详解
2017/12/13 PHP
新闻内页-JS分页
2006/06/07 Javascript
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
2012/05/23 Javascript
jQuery控制TR显示隐藏的三种常用方法
2014/08/21 Javascript
JavaScript插件化开发教程 (四)
2015/01/27 Javascript
jQuery解析XML 详解及方法总结
2016/09/28 Javascript
js实现登录注册框手机号和验证码校验(前端部分)
2017/09/28 Javascript
Node.js静态服务器的实现方法
2018/02/28 Javascript
JavaScript常见继承模式实例小结
2019/01/11 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
2019/05/23 Javascript
npm 语义版本控制详解
2019/09/10 Javascript
javascript canvas检测小球碰撞
2020/04/17 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
2020/04/27 Javascript
[39:21]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.24
2019/09/10 DOTA
Python __setattr__、 __getattr__、 __delattr__、__call__用法示例
2015/03/06 Python
Python实现Tab自动补全和历史命令管理的方法
2015/03/12 Python
Python简单连接MongoDB数据库的方法
2016/03/15 Python
Python中操作符重载用法分析
2016/04/29 Python
Python格式化日期时间操作示例
2018/06/28 Python
numpy矩阵数值太多不能全部显示的解决
2020/05/14 Python
一款纯css3制作的2015年元旦雪人动画特效教程
2014/12/29 HTML / CSS
小蚁科技官方商店:YI Technology
2019/08/23 全球购物
Linux机考试题
2015/07/17 面试题
Ajax主要包含了哪些技术
2014/06/12 面试题
职业教育毕业生求职信
2013/11/09 职场文书
设备动力科岗位职责范本
2014/02/23 职场文书
我的中国心演讲稿
2014/09/04 职场文书
农村党支部书记司法四风问题对照检查材料
2014/09/26 职场文书
大学生个人简历自我评价
2015/03/11 职场文书
老乡会致辞
2015/07/28 职场文书
JS新手入门数组处理的实用方法汇总
2021/04/07 Javascript
CSS 伪元素::marker详解
2021/06/26 HTML / CSS
用Python爬取英雄联盟的皮肤详细示例
2021/12/06 Python
Win10本地连接不见了怎么恢复? win10系统电脑本地连接不见了解决方法
2023/01/09 数码科技