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中的代码，click here。

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没有显示图标，因为你没有激活它上面的bootstrap。如果我激活bootstrap扩展，我可以看到“+” 我不确定你问我们是什么，因为你的帖子中没有真正的问题，但如果我点击“+”，它会添加一个字段。问题是“ - ”在“+”前面，所以你看不到它。您还要通过执行添加重复ID，这绝不是一件好事。如果您可以编辑帖子并添加问题，我可以回答您想要了解的内容。： - ）

Answer 2

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

bootstrap.min.js和bootstrap.min.css

请参阅：http://jsfiddle.net/u4e64quc/4/

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

enter image description here

动态添加和删除表单域

2 个答案: