improve ui by alowing remove button

django_inline_formset/products/forms.py

@@ -60,11 +60,11 @@ class Meta:
 
 VariantFormSet = inlineformset_factory(
     Product, Variant, form=VariantForm,
-    extra=1, can_delete=True,
+    extra=0, can_delete=True,
     can_delete_extra=True
 )
 ImageFormSet = inlineformset_factory(
     Product, Image, form=ImageForm,
-    extra=1, can_delete=True,
+    extra=0, can_delete=True,
     can_delete_extra=True
 )

django_inline_formset/templates/products/product_create_or_update.html

@@ -37,14 +37,17 @@ <h4 class="card-title">Add Products</h4>
     {% with named_formsets.images as formset %}  
         {{ formset.management_form }}
         <script type="text/html" id="images-template">   // id="inlineformsetname-template"
-            <tr id="images-__prefix__" class= hide_all>  // id="inlineformsetname-__prefix__"
+            <tr id="images-__prefix__"> 
                 {% for fields in formset.empty_form.hidden_fields %}
                     {{ fields }}
                 {% endfor %}
 
                 {% for fields in formset.empty_form.visible_fields %}
                     <td>{{fields}}</td>
                 {% endfor %}
+                <td>
+                    <button type="button" class="btn btn-danger remove-image">Remove</button>
+                </td>
             </tr>
         </script>
 
@@ -98,6 +101,10 @@ <h5 class="modal-title" id="exampleModalLabel{{formss.instance.pk}}">Are Your Su
                                         </div>
                                         </div>
                                     </div>
+                                </td>
+                                {% else %}
+                                <td>
+                                    <button type="button" class="btn btn-danger remove-image">Remove</button>
                                 </td>            
                             {% endif %}
                         </tr>
@@ -116,16 +123,18 @@ <h5 class="modal-title" id="exampleModalLabel{{formss.instance.pk}}">Are Your Su
     <!-- Note: here variants is our VariantFormSet name, used in get_named_formsets function in views.py -->
     {% with named_formsets.variants as formset %}
         {{ formset.management_form }}
-        <script type="text/html" id="variants-template">  // id="inlineformsetname-template"
-            // id='inlineformsetname-__prefix__' 
-            <tr id="variants-__prefix__" class= hide_all>
+        <script type="text/html" id="variants-template">
+            <tr id="variants-__prefix__">
                 {% for fields in formset.empty_form.hidden_fields %}
                     {{ fields }}
                 {% endfor %}
 
                 {% for fields in formset.empty_form.visible_fields %}
                     <td>{{fields}}</td>
                 {% endfor %}
+                <td>
+                    <button type="button" class="btn btn-danger remove-variant">Remove</button>
+                </td>
             </tr>
         </script>
         <div class="table-responsive card mt-4">
@@ -147,7 +156,7 @@ <h4 class="card-title">Add Variants</h4>
                     {% endfor %}
                     {% for formss in formset %}
                         {{ formss.management_form }}
-                        <tr id="variants-{{ forloop.counter0 }}" class= hide_all>  <!-- id="inlineformsetname-counter" -->
+                        <tr id="variants-{{ forloop.counter0 }}">  <!-- id="inlineformsetname-counter" -->
                             {{ formss.id }}
                             {% for field in formss.visible_fields %}
                                 <td>
@@ -182,6 +191,10 @@ <h5 class="modal-title" id="exampleModalLabel{{formss.instance.pk}}">Are Your Su
                                         </div>
                                         </div>
                                     </div>
+                                </td>
+                                {% else %}
+                                <td>
+                                    <button type="button" class="btn btn-danger remove-variant">Remove</button>
                                 </td>            
                             {% endif %}
                         </tr>
@@ -192,7 +205,7 @@ <h5 class="modal-title" id="exampleModalLabel{{formss.instance.pk}}">Are Your Su
         </div>
 
         {% endwith %}
-        <!-- inline form for Images end -->
+        <!-- inline form for Variant end -->
 
         <div class="form-group">
             <button type="submit" class="btn btn-secondary btn-block">Submit</button>
@@ -214,6 +227,15 @@ <h5 class="modal-title" id="exampleModalLabel{{formss.instance.pk}}">Are Your Su
           // update form count
           $('#id_images-TOTAL_FORMS').attr('value', count+1);
       });
+      // when user clicks remove btn of images
+      $('#item-images').on('click', '.remove-image', function(ev) {
+          ev.preventDefault();
+          $(this).closest('tr').remove();
+
+          // update form count
+          var count = $('#item-images').children().length;
+          $('#id_images-TOTAL_FORMS').attr('value', count);
+      });
   });
 
   $(document).ready(function() {
@@ -228,6 +250,15 @@ <h5 class="modal-title" id="exampleModalLabel{{formss.instance.pk}}">Are Your Su
           // update form count
           $('#id_variants-TOTAL_FORMS').attr('value', count+1);
       });
+      // when user clicks remove btn of variants
+    $('#item-variants').on('click', '.remove-variant', function(ev) {
+        ev.preventDefault();
+        $(this).closest('tr').remove();
+
+        // update form count
+        var count = $('#item-variants').children().length;
+        $('#id_variants-TOTAL_FORMS').attr('value', count);
+    });
   });
 </script>