Add Remove row using jQuery

jQuery Code:

  1. jQuery(document).ready(function () {
  2.     /*
  3.      * Give an attribute to anchor tag 'js-add' and the value of that attribute
  4.      * to be his    parent selector which is to be copied and to be added after it.
  5.      * For example if you provide <a  js-add=".js-field_row">text</a>
  6.      * On click of this element will copy its parent element having class js-field_row
  7.      * and will after it.
  8.      * */
  9.     jQuery(document).on('click', 'a[js-add]', function () {
  10.         var element_to_clone_selector = jQuery(this).attr('js-add');
  11.         var element_to_clone = jQuery(this).parents(element_to_clone_selector);
  12.         var duplicate_element = element_to_clone.clone();
  13.         element_to_clone.after(duplicate_element);
  14.     });
  15.  
  16.     /*
  17.      * Give an attribute to anchor tag 'js-remove' and the value of that attribute
  18.      * to be his    parent selector which is to be deleted.
  19.      * For example if you provide <a  js-remove=".js-field_row">text</a>
  20.      * On click of this element will remove its parent element having class js-field_row
  21.      * */
  22.     jQuery(document).on('click', 'a[js-remove]', function () {
  23.         var removable_element_selector = jQuery(this).attr('js-remove');
  24.         var removable_element = jQuery(this).parents(removable_element_selector);
  25.         //count all siblings, if its more than 1, delete the selected element.
  26.         var total_row = removable_element.siblings(removable_element_selector).length;
  27.         if (total_row > 0) {
  28.             removable_element.remove();
  29.         } else {
  30.             alert('There should be at least one row');
  31.         }
  32.     });
  33.  
  34. });

 

Add two buttons inside the row to add and remove the row like:

<a class="btn btn-success" js-add=".js-field_row">+</a>
<a class="btn btn-danger" js-remove=".js-field_row">-</a>

Inside js-add and js-remove attribute of the buttons add the selector of the row. For example if you want to add/ remove row on the basis of class add .class_name
.

HTML Code example:

  1. <div class="row table-striped form-group js-field_row">
  2.                     <div class="col-sm-3">
  3.                         <div class="form-group field-templatemeta-field_name required">
  4. <label class="control-label" for="templatemeta-field_name">Field Name</label>
  5. <input type="text" id="templatemeta-field_name" class="form-control" name="TemplateMeta[field_name][]" maxlength="25">
  6.  
  7. <div class="help-block"></div>
  8. </div>                    </div>
  9.                     <div class="col-sm-3">
  10.                                             </div>
  11.                     <div class="col-sm-1">
  12.                                            </div>
  13.                     <div class="col-sm-3 js-field_value_col">
  14.                         <div class="form-group field-templatemeta-field_value">
  15. <label class="control-label" for="templatemeta-field_value">Field Value</label>
  16. <input type="hidden" id="templatemeta-field_value" class="js-field_value" name="TemplateMeta[field_value][]">
  17.  
  18. </div>                        
  19.                     </div>
  20.                     <div class="col-sm-2 pull-right">
  21.                         <label>&nbsp;</label><br>
  22.                         <a class="btn btn-success" js-add=".js-field_row">+</a>
  23.                         <a class="btn btn-danger" js-remove=".js-field_row">-</a>
  24.                     </div>
  25.                 </div>

 

Posted in JavaScript, JQuery by Leave a comment