Bootstrap Snippet dynamically add and remove div/form using HTML CSS Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ---------->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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 ---------->
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
    
 <div class="form-group row custom-upload">
   
    <div class="col-md-12">
        <div data-role="appendRow">
            <div class="form-inline form-row">
            
              <input input type="text" class="form-control mb-2 mr-sm-2 col-sm-4" id="field-name" placeholder="Enter....">               
              <!-- file upload start-->
              <div class="mb-2 mr-sm-2 col-sm-5 wrap-input-container">
                <label class="custom-file-upload form-control">
                  <i class="fa fa-cloud-upload"></i> Upload Docs
                </label>
                <input class="file-upload" name="file_name" type="file">
              </div>
                 <!-- file upload ends-->                
                                    
                <button class="btn btn-sm btn-danger  mb-2" data-role="remove">
                 <i class="fa fa-minus"></i>
                </button>
                <button class="btn btn-sm btn-primary  mb-2" data-role="add">
                    <i class="fa fa-plus"></i>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/*
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
font-family: 'Open Sans', sans-serif;
 */
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
     overflow-x:hidden;
     font-family: 'Open Sans', sans-serif;
     position:relative;
}
.custom-upload { margin-top:20px;}
section {
    padding: 60px 0;
    overflow-y: auto !important;
}
section .section-title {
    text-align: center;
    color: #007b5e;
    margin-bottom: 50px;
    text-transform: uppercase;
}
.btn {margin-right:10px;}
a {
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// Dynamically add-on fields
$(function() {
    // Remove button click
    $(document).on(
        'click',
        '[data-role="appendRow"] > .form-inline [data-role="remove"]',
        function(e) {
            e.preventDefault();
            $(this).closest('.form-row').remove();
        }
    );
    // Add button click
    $(document).on(
        'click',
        '[data-role="appendRow"] > .form-row [data-role="add"]',
        function(e) {
            e.preventDefault();
            var container = $(this).closest('[data-role="appendRow"]');
            new_field_group = container.children().filter('.form-row:first-child').clone();
          new_field_group.find('label').html('Upload Document'); new_field_group.find('input').each(function(){
                $(this).val('');
            });
            container.append(new_field_group);
        }
    );
});
// file upload
$(document).on('change', '.file-upload', function(){
  var i = $(this).prev('label').clone();
  var file = this.files[0].name;
  $(this).prev('label').text(file);
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"dynamically add and remove div/form"
Bootstrap 4.1.1 Snippet by tapan

Related: See More

Questions / Comments:

"dynamically add and remove div/form" Bootstrap 4.1.1 Snippet by tapan

Related: See More

Questions / Comments:

"dynamically add and remove div/form"
Bootstrap 4.1.1 Snippet by tapan