使用jQuery引导程序添加删除输入框

Question

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

Answer 1

您需要将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>

在这里更新小提琴