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 ajaxupload插件实现无刷新上传文件
Apr 23 jQuery
jQuery复合事件用法示例
Jun 10 jQuery
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 jQuery
jQuery选择器_动力节点Java学院整理
Jul 05 jQuery
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
利用jQuery实现简单的拖曳效果实例代码
Oct 20 jQuery
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
[原创]jQuery实现合并/追加数组并去除重复项的方法
Apr 11 jQuery
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 jQuery
jQuery实现鼠标拖动图片功能
Mar 04 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的安全
2006/10/09 PHP
php判断上传的Excel文件中是否有图片及PHPExcel库认识
2013/01/11 PHP
PHP调用MsSQL Server 2012存储过程获取多结果集(包含output参数)的详解
2013/07/03 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
php用xpath解析html的代码实例讲解
2019/02/14 PHP
PHP中rename()函数的妙用讲解
2019/02/28 PHP
javascript Array.remove() 数组删除
2009/08/06 Javascript
IE与Firefox在JavaScript上的7个不同写法小结
2009/09/14 Javascript
JavaScript Event学习第八章 事件的顺序
2010/02/07 Javascript
jQuery+css实现图片滚动效果(附源码)
2013/03/18 Javascript
Javascript事件实例详解
2013/11/06 Javascript
NodeJS学习笔记之(Url,QueryString,Path)模块
2015/01/13 NodeJs
js模仿php中strtotime()与date()函数实现方法
2015/08/11 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
2015/08/24 Javascript
Node.js巧妙实现Web应用代码热更新
2015/10/22 Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
2016/12/02 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
2017/01/11 Javascript
jQuery向webApi提交post json数据
2017/01/16 Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
2017/09/20 Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
2018/08/12 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
2018/10/12 Javascript
小程序富文本提取图片可放大缩小
2020/05/26 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
2020/11/12 Javascript
python获取指定路径下所有指定后缀文件的方法
2015/05/26 Python
Python面向对象程序设计构造函数和析构函数用法分析
2019/04/12 Python
Python爬虫之urllib基础用法教程
2019/10/12 Python
使用Python的Turtle库绘制森林的实例
2019/12/18 Python
Django-xadmin后台导入json数据及后台显示信息图标和主题更改方式
2020/03/11 Python
Python selenium爬虫实现定时任务过程解析
2020/06/08 Python
keras slice layer 层实现方式
2020/06/11 Python
世界第一冲浪品牌:O’Neill
2016/08/30 全球购物
Notino瑞典:购买香水和美容产品
2019/07/26 全球购物
网络程序员自荐信
2014/01/25 职场文书
《蜗牛的奖杯》教后反思
2014/04/24 职场文书
企业百日安全活动总结
2015/05/07 职场文书
SpringBoot集成Redis的思路详解
2021/10/16 Redis