动态添加和删除表单字段

Question

我想创建一个带有图标的表单域，比方说一个加号。 单击此图标时，将出现一个新的相同表单字段，但其中带有减号。 如您所料，减号会再次删除表单字段。

我想使用Bootstrap（3.2.0）和jQuery做到这一点。

做这个的最好方式是什么？ 我想限制字段的数量（比如说3个），并且也没有重复的id字段。 另外，我希望该图标位于input 。

HTML档案：

<div class='container'>
    <div class='row marketing'>
        <div class='col-lg-15'>
            <form class='form-horizontal'>        
                <div class="form-group has-feedback">
                    <label id="keywordLabel" for="keyword" class="col-sm-2 control-label">Keywords:</label>
                    <div id="keywordList" class="col-sm-10">
                        <input id="keyword" type="text" name="keyword" class="form-control"></input>
                        <span id="addKeyword" class="glyphicon glyphicon-plus form-control-feedback"></span>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

JavaScript文件：

$(document).ready( function() {
    $('#addKeyword').on('click', function() {
        $('#keywordList').append(
          "<input id='keyword' class='form-control' type='text' name='keyword'><span id='removeKeyword' class='glyphicon glyphicon-minus form-control-feedback'></span>"
        );
    });
});

对于我在JSFiddle中的代码， 请单击此处 。

Answer 1

编辑：我仍然在搞乱，如果我删除了javascript中的“ form-control-feedback”类，则效果更好。

现在我有：

<div class='container'>
<div class='row marketing'>
    <div class='col-lg-15'>
        <form class='form-horizontal'>        
            <div class="form-group has-feedback">
                <label id="keywordLabel" for="keyword" class="col-sm-2 control-label">Keywords:</label>
                    <div id="keywordList" class="col-sm-10">
                        <div class="form-control">
                        <input id="keyword" type="text" name="keyword" class=""></input>
                            <span id="addKeyword"  aria-hidden="true" class="glyphicon glyphicon-plus form-control-feedback"></span></div>
                    </div>
            </div>
        </form>
    </div>
</div>

和JS：

$(document).ready(function () {
$('#addKeyword').on('click', function () {
    $('#keywordList').append("<div class='form-control'><input id='x' class='form-control' type='text' name='keyword'></input><span id='removeKeyword'  aria-hidden='true' class='glyphicon glyphicon-minus'></span></div>");
});

}）;

仍不完美，但已经接近。

原始文本： 首先，您的jsfiddle不显示图标，因为您没有在其上激活引导程序。 如果我激活了引导扩展程序，则可以看到“ +”，我不确定您要问我们什么，因为您的帖子中没有真正的问题，但是如果单击“ +”，则会添加一个字段。 问题是“-”在“ +”前面，因此您看不到它。 您还通过这样做添加了重复的ID，这从来都不是一件好事。 如果您可以编辑帖子并添加问题，我可以回答您想知道的内容。 :-)

Answer 2

您需要在Jsfiddle中加载适当的外部资源

bootstrap.min.js和bootstrap.min.css

参见： http : //jsfiddle.net/u4e64quc/4/

或者，检查Jsfiddle选项中的引导程序，而不需要加载外部资源-这也解决了注释中指出的表单字段之外的图标的问题。