Bootstrap Snippet Dynamic form row Add and Remove inputs using HTML jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<fieldset>
<h2 class="fs-title">Укажите размер москитки</h2><h3 class="fs-subtitle">Шаг 2</h3>
<div class="row wh">
    <!--<div class="form-group">-->
        <input type="text" class="form-control" name="width" placeholder="ширина, мм" />
        <input type="text" class="form-control" name="height" placeholder="высота, мм" />
    <!--</div>-->
    <span><button class="btn btn-add btn-success" type="button"><span class="fa fa-plus">+</span></button></span>
</div>
<p>Важно! Замеряйте размер открытого окна / дверного проёма по центру от резинки до резинки. <br>Пользуйтесь точной рулеткой.</p>
<input type="button" name="previous" class="btn btn-warning prev action-button" value="Назад" />
<input type="button" name="next" class="btn btn-success next action-button" value="Продолжить" />
</fieldset>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(document).ready(function() {
    var buttonadd = '<span class="col-md-2 to-right"><button class="btn btn-success btn-add" type="button"><span class="fa fa-plus">+</span></button></span>';
    var rowclone = '<div class="rowclonned">'+$(".wh").html()+'</div>';
    $(".wh").html(rowclone).after('<div class="row rowclone"></div>');
    
    $(document).on('click', '.btn-add', function(e) {
        e.preventDefault();
        $(".rowclone").append(rowclone);
        $(this).removeClass('btn-add').addClass('btn-remove').removeClass('btn-success').addClass('btn-danger').html('<span class="fa fa-minus">—</span>');
    }).on('click', '.btn-remove', function(e) {
        $(this).parents('.rowclonned').remove();
        e.preventDefault();
        return false;
    });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Dynamic form row Add and Remove inputs"
Bootstrap 3.3.0 Snippet by blackgirl

Related: See More

Questions / Comments:

"Dynamic form row Add and Remove inputs" Bootstrap 3.3.0 Snippet by blackgirl

Related: See More

Questions / Comments:

"Dynamic form row Add and Remove inputs"
Bootstrap 3.3.0 Snippet by blackgirl