使用jquery或javascript添加和删除多个输入组

Question

我很困惑如何在我的代码中添加/删除多个输入字段。

这是我的代码：

＆＃13;

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group" id="attrBarang">
    <label class="col-sm-2 control-label">Kode Barang</label>
    <div class="col-sm-2">
        <div class="input-group">
            <div class="input-group-addon">
                <a href="#modalCariBarang" data-toggle="modal" data-hover="tooltip" data-placement="top" title="Cari">
                    <span class='glyphicon glyphicon-search'></span>
                </a>
            </div>
            <input type="text" class="form-control" placeholder="Pilih Barang" name="transaksiBarang" id="transaksiBarang" aria-describedby="basic-addon1" />
        </div>
    </div>
    <div class="col-sm-2">
        <div class="input-group">
            <div class="input-group-addon">Rp </div>
            <input type="text" class="form-control cost" placeholder="Harga" name="transaksiHargaPcs" id="transaksiHargaPcs" aria-describedby="basic-addon1" />
        </div>
    </div>
    <div class="col-sm-2">
        <div class="input-group">
            <div class="input-group-addon">Qty </div>
            <input type="text" class="form-control cost" placeholder="Quantity" name="transaksiQtyItem" id="transaksiQtyItem" aria-describedby="basic-addon1" />
        </div>
    </div>
    <div class="col-sm-1">
        <div class="input-group">
            <div class="input-group-addon">% </div>
            <input type="text" class="form-control" value="0" name="transaksiDiskon" id="transaksiDiskon" aria-describedby="basic-addon1" />
        </div>
    </div>
    <div class="col-sm-0">
        <button id="b1" class="btn btn-success add-more"><span class="glyphicon glyphicon-plus-sign"></span></button>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我想在点击按钮时添加新的输入字段组。 请指教，谢谢

Answer 1

试试这个：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group" id="attrBarang">
    <label class="col-sm-2 control-label">Kode Barang</label>
    <div class="input-div">
        <div class="col-sm-2">
            <div class="input-group">
                <div class="input-group-addon">
                    <a href="#modalCariBarang" data-toggle="modal" data-hover="tooltip" data-placement="top" title="Cari">
                        <span class='glyphicon glyphicon-search'></span>
                    </a>
                </div>
                <input type="text" class="form-control" placeholder="Pilih Barang" name="transaksiBarang" id="transaksiBarang" aria-describedby="basic-addon1" />
            </div>
        </div>
        <div class="col-sm-2">
            <div class="input-group">
                <div class="input-group-addon">Rp </div>
                <input type="text" class="form-control cost" placeholder="Harga" name="transaksiHargaPcs" id="transaksiHargaPcs" aria-describedby="basic-addon1" />
            </div>
        </div>
        <div class="col-sm-2">
            <div class="input-group">
                <div class="input-group-addon">Qty </div>
                <input type="text" class="form-control cost" placeholder="Quantity" name="transaksiQtyItem" id="transaksiQtyItem" aria-describedby="basic-addon1" />
            </div>
        </div>
        <div class="col-sm-1">
            <div class="input-group">
                <div class="input-group-addon">% </div>
                <input type="text" class="form-control" value="0" name="transaksiDiskon" id="transaksiDiskon" aria-describedby="basic-addon1" />
            </div>
        </div>
   </div>
    <div class="col-sm-0">
        <button id="b1" class="btn btn-success add-more"><span class="glyphicon glyphicon-plus-sign"></span></button>
        <button id="b2" class="btn btn-success add-more"><span class="glyphicon glyphicon-minus-sign"></span></button>
    </div>
</div>

这是de jquery代码：

$('#b1').click(function(){
    var newGroup = $('.input-div').last().html();
    $('.input-div').last().after('<div class="input-div">'+newGroup+'</div>');

});

$('#b2').click(function(){
    $('.input-div').last().remove();
});