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

發(fā)布時間：2022-03-31 09:53:33 來源：億速云閱讀：322 作者：iii 欄目：開發(fā)技術(shù)

這篇文章主要介紹了jQuery怎么實現(xiàn)動態(tài)添加、刪除按鈕及input輸入框的相關(guān)知識，內(nèi)容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇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怎么實現(xiàn)動態(tài)添加、刪除按鈕及input輸入框

關(guān)于“jQuery怎么實現(xiàn)動態(tài)添加、刪除按鈕及input輸入框”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“jQuery怎么實現(xiàn)動態(tài)添加、刪除按鈕及input輸入框”知識都有一定的了解，大家如果還想學習更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細節(jié)

jQuery怎么實現(xiàn)動態(tài)添加、刪除按鈕及input輸入框

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽

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