extensions/static/extensions/scripts/manage.js

@@ -14,6 +14,7 @@ function appendImageUploadForm() {
       accept="image/*" class="form-control"
       id="id_${formsetPrefix}-${i}-source">
     <button class="btn btn-link js-btn-reset-img-upload-form mt-1"><i class="i-refresh"></i> Reset</button>
+    <button class="btn btn-link js-btn-remove-img-upload-form mt-1"><i class="i-trash"></i> Remove</button>
     <div class="invalid-feedback"></div>
   </div>
   <div class="col">
@@ -23,7 +24,7 @@ function appendImageUploadForm() {
     <div class="invalid-feedback"></div>
   </div>
   `;
-  formRow.classList.add('row', 'ext-edit-field-row');
+  formRow.classList.add('row', 'ext-edit-field-row', 'js-ext-edit-field-row');
   formRow.innerHTML = newFormHTML;
   formsetContainer.appendChild(formRow);
   inputTotalForms.value = parseInt(inputTotalForms.value) + 1;
@@ -33,12 +34,32 @@ btnAddImage.addEventListener('click', function(ev) {
   ev.preventDefault();
   appendImageUploadForm();
 
-  // Call function resetImgUploadForm
+  // Init function removeImgUploadForm
+  removeImgUploadForm();
+
+  // Init function resetImgUploadForm
   resetImgUploadForm();
 
   return false;
 });
 
+// Create function removeImgUploadForm
+function removeImgUploadForm() {
+  const btnRemoveImgUploadForm = document.querySelectorAll('.js-btn-remove-img-upload-form');
+
+  btnRemoveImgUploadForm.forEach(function(item) {
+    item.addEventListener('click', function(e) {
+      e.preventDefault();
+
+      // Find the row parent
+      const rowParent = this.closest('.js-ext-edit-field-row');
+
+      // Remove the row
+      rowParent.remove();
+    });
+  });
+}
+
 // Create function resetImgUploadForm
 function resetImgUploadForm() {
   const btnResetImgUploadForm = document.querySelectorAll('.js-btn-reset-img-upload-form');