使用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>

注意:我使用eachforeach循环打印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