使用jQuery引导程序添加删除输入框
add remove input box using jQuery bootstrap
我使用jQuery和bootstrap 3添加删除输入框。当我有一个输入时,我采取了行动,这起到了作用,并为每个输入显示了添加图标和显示删除图标+1。现在,在默认的动态形式中,我有两个、三个。。。输入框,并且需要显示每个输入框的删除图标。但当我只点击添加图标时,我会看到删除图标。如何修复默认情况下每个输入框显示删除图标的问题?
JS:
$(document).ready(function () {
var MaxInputsAudio = 8; //maximum input boxes allowed
var InputsWrapper = $("#AudioWrapper input"); //Input boxes wrapper ID
var AddButton = "#AddMoreAudio"; //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
{
e.preventDefault();
InputsWrapper = $("#AudioWrapper input");
x = InputsWrapper.length;
console.log(x + ' ' + MaxInputsAudio);
if (x < MaxInputsAudio) //max input box allowed
{
FieldCount++; //text box added increment
//add input box
$(InputsWrapper).parents('#AudioWrapper').append('<div class="AudioRemove" style="position:relative;clear:both;"><div style="float: left; width: 100%;"><input id="audio" onclick="openKCFinder(this)" class="form-control" type="text" name="audio[]"/></div><div style="float: left; position: absolute; left: -31px;top:10px;"><a href="#" class="removeclassAudio icon-minus fa-2x alerts-color">delete</a></div></div>');
x++; //text box increment
}
return false;
});
$("body").on("click", ".removeclassAudio", function (e) { //user click on remove text
console.log(x);
if (x > 1) {
$(this).parents('.AudioRemove').remove(); //remove text box
x--; //decrement textbox
}
return false;
})
});
HTML:
<div class="form-group">
<label for="audio" class="col-lg-1 control-label"></label>
<div class="col-lg-9">
<div class="row">
<div class="col-lg-6">
<div class="input-group input-group-md"> <span class="input-group-addon"><a class="help-box" rel="popover" data-placement="top" data-original-title="" data-content=""><i class=" icon-music"></i></a></span>
<div id="AudioWrapper">
<input id="audio" onclick="" class="form-control" type="text" name="audio[]" placeholder="">
<input id="audio" onclick="" class="form-control" type="text" name="audio[]" placeholder="">
</div>
</div>
</div><a style="float:right" href="#" id="AddMoreAudio" class=" icon-plus icon-2x margin-top-8">Add</a>
</div>
</div>
</div>
注意:我使用each
、foreach
循环打印PHP
代码中的输入框。
演示@JSFIDDLE
您需要将delete元素的标记放在原始HTML代码中。
<div class="input-group input-group-md">
<span class="input-group-addon">
<a class="help-box" rel="popover" data-placement="top" data-original-title="" data-content="">
<i class=" icon-music"></i>
</a>
</span>
<div id="AudioWrapper">
<?php foreach($audiofiles as $index->$audio) : ?>
<input id="audio" onclick="" class="form-control" type="text" name="audio[]" placeholder="">
<?php if($index > 0) : ?>
<div class="AudioRemove" style="position:relative;clear:both;">
<div style="float: left; width: 100%;">
<input id="audio" onclick="openKCFinder(this)" class="form-control" type="text" name="audio[]"/>
</div>
</div>
<?php endif; ?>
<?php endforeach; ?>
</div>
</div>
<a style="float:right" href="#" id="AddMoreAudio" class=" icon-plus icon-2x margin-top-8">Add</a>
此处更新了fiddle
相关文章:
- 如何在HTML输入字段中添加不可删除的后缀
- React 15使用空字符串删除输入值
- 主体单击删除功能上的输入框宽度
- 如何选择多个输入字段并删除所需的属性
- 从输入值中删除最后一个单词
- 删除输入中输入的符号
- 使用jquery删除输入框上的外部处理程序/库
- 附加和删除输入值的一部分
- 在Reactjs中添加和删除值未重置的输入字段
- 根据下拉选择向表单添加和删除输入标记
- 添加/删除/更改输入文本的部分值
- jQuery - 添加删除类 - 设置输入值
- 如何在单击时从输入字段中删除最后一个字符
- 删除ng模型中的ng模型输入值
- 在提交触发器之前从查询输入中删除标记
- 在粘贴事件Javascript的输入字段中删除所有非数字字符
- 如何从 Chrome 中的文件输入中删除“未选择文件”工具提示
- 尝试擦除时删除输入中的零
- 为收音机点击的输入添加值,然后删除
- 输入删除/撤消的事件处理程序