点击增加输入框，可删除，类似投票选项增加_layui input可增加删除-优快云博客

本文介绍了一种使用HTML和JavaScript实现动态添加和删除投票选项输入框的方法，最多允许添加12个输入框，并提供了两种不同的展示形式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

展现形式一：

html,样式根据自己需要的进行更改

$(document).ready(function() {
/*---------------addinput-----------*/
var MaxInputs = 12; //maximum input boxes allowed
var InputsWrapper = $("#InputsWrapper"); //Input boxes wrapper ID
var AddButton = $("#AddMoreFileBox"); //Add button ID

var x = $("#InputsWrapper .option").length; //initlal text box count
var FieldCount=1; //to keep track of text box added

$(AddButton).click(function (e) //on add input button click
{
x = $("#InputsWrapper .option").length;
FieldCount = x + 1;
if(x <= MaxInputs) //max input box allowed
{
FieldCount++; //text box added increment
//add input box
var optionnum =FieldCount+1;
$(InputsWrapper).append('<div class="col-sm-12 form-group form-group-sm option"><label class="col-sm-2 control-label"></label><div class="col-sm-3"><input class="form-control input-sm" type="text" name="mytext[]" id="field_'+ FieldCount +'" value="" maxlength="25" placeholder="投票选项'+ optionnum +'" /></div><div class="col-sm-1 vote-del"><button class="btn btn-xs delbutton">删除</button></div></div>');
//x++; //text box increment
if(x == 12)
//添加按钮
$("#AddMoreFileBox").css("display","none");
else
{ //添加按钮消失
$("#AddMoreFileBox").css("display","block");}
}

return false;
});

$("body").on("click",".vote-del", function(e){ //user click on remove text
if( x >= 0 ) {
$(this).parent('div').remove(); //remove text box
x--; //decrement textbox
//添加按钮出现
$("#AddMoreFileBox").css("display","block");
var i = 3;
$("#InputsWrapper .option").each(function(){
$(this).find('input').attr('placeholder','投票选项'+i);
i++;
})
}
return false;
})
});

</script>

展现形式二

html,样式根据自己需要的进行更改
<div id="InputsWrapper">

</div>

</div>

$(document).ready(function() {
/*---------------addinput-----------*/
var MaxInputs = 12; //maximum input boxes allowed
var InputsWrapper = $("#InputsWrapper"); //Input boxes wrapper ID
var AddButton = $("#AddMoreFileBox"); //Add button ID

var x = $("#InputsWrapper input").length; //initlal text box count
var FieldCount=1; //to keep track of text box added

$(AddButton).click(function (e) //on add input button click
{
x = $("#InputsWrapper input").length;
FieldCount = x + 1;
if(x <= MaxInputs) //max input box allowed
{
FieldCount++; //text box added increment
//add input box
var optionnum =FieldCount+1;
$(InputsWrapper).append('<div class="input-group mt-10"><input class="form-control input-sm" type="text" name="mytext[]" id="field_'+ FieldCount +'" value="" maxlength="25" placeholder="投票选项'+ optionnum +'" /><span class="input-group-addon vote-del"><span class="glyphicon glyphicon-remove"></span></span></div>');
//x++; //text box increment
if(x == 12)
//添加按钮
$("#AddMoreFileBox").css("display","none");
else
{ //添加按钮消失
$("#AddMoreFileBox").css("display","block");}
}

return false;
});

$("body").on("click",".vote-del", function(e){ //user click on remove text
if( x >= 0 ) {
$(this).parent('div').remove(); //remove text box
x--; //decrement textbox
//添加按钮出现
$("#AddMoreFileBox").css("display","block");
var i = 3;
$("#InputsWrapper input").each(function(){
$(this).attr('placeholder','投票选项'+i);
i++;
})
}
return false;
})
});