jQuery實現(xiàn)動態(tài)添加、刪除按鈕及input輸入框的方法

更新時間：2017年04月27日 14:49:20 作者：David_黎

這篇文章主要介紹了jQuery實現(xiàn)動態(tài)添加、刪除按鈕及input輸入框的方法,涉及jQuery事件響應及頁面元素動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下

本文實例講述了jQuery實現(xiàn)動態(tài)添加、刪除按鈕及input輸入框的方法。分享給大家供大家參考，具體如下：

<html>
<head>
<meta charset="utf-8">
<title>動態(tài)創(chuàng)建按鈕</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相關內容感興趣的讀者可查看本站專題：《jQuery常見事件用法與技巧總結》、《jQuery常用插件及用法總結》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴展技巧總結》、《jQuery拖拽特效與技巧總結》、《jQuery表格(table)操作技巧匯總》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結》

希望本文所述對大家jQuery程序設計有所幫助。

您可能感興趣的文章:

Bootstrap圖片輪播組件使用實例解析
圖片輪播組件是一個在網頁中很常見的技術，這篇文章主要為大家詳細介紹了Bootstrap圖片輪播組件使用實例，感興趣的小伙伴們可以參考一下
2016-06-06
JavaScript判斷元素是否在可視區(qū)域的三種方法
這這篇文章給大家總結了JavaScript判斷元素是否在可視區(qū)域的三種方法,getBoundingClientRect,IntersectionObserver和offsetTop、scrollTop這三種方法,文中通過代碼示例給大家介紹的非常詳細,需要的朋友可以參考下
2023-12-12
JavaScript 數(shù)據(jù)元素集合與數(shù)組的區(qū)別說明
我們在獲取一組頁面元素時常會用到getElementsByName()或是getElementsByTagName()方法。
2010-05-05
原生JavaScript制作計算器
本文給大家匯總了2個原生JavaScript實現(xiàn)的計算器功能的代碼，一個簡單一個稍微復雜些，小伙伴們根據(jù)自己的需要來選擇吧
2016-10-10
合并多個ArrayBuffer場景及方法示例
這篇文章主要為大家介紹了合并多個ArrayBuffer方法示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2023-11-11
使用javascript獲取頁面名稱
這篇文章主要介紹了使用javascript獲取頁面名稱，非常的簡潔，有需要的小伙伴參考下
2014-12-12
js實現(xiàn)局部頁面打印預覽原理及示例代碼
js 如何打印預覽，實局部打印頁面很簡單。就是把你需要打印的部分做一個起始標記，下面有個示例大大家不妨參考下
2014-07-07
JS?限時限次數(shù)點擊按鈕的實現(xiàn)思路
這篇文章主要介紹了JS?限時限次數(shù)點擊按鈕,實現(xiàn)方法很簡單需要用一個變量作為計數(shù),點擊一次，計數(shù)加一點擊函數(shù)內判斷計數(shù)變量設置定時恢復，對實例代碼感興趣的朋友一起看看吧
2022-03-03
基于AGS JS開發(fā)自定義貼圖圖層
這篇文章主要為大家詳細介紹了基于AGS JS開發(fā)自定義貼圖圖層的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-03-03
javascript仿百度輸入框提示自動下拉補全
這篇文章主要介紹了javascript仿百度輸入框提示自動下拉補全的相關資料,需要的朋友可以參考下
2016-01-01