refactor JS to rvise the indicies used in id, for and names on elements in DS records after deleting, revise post logic when extension to be passed is empty to pass {} to the setter

src/registrar/assets/js/get-gov.js

@@ -287,6 +287,34 @@ function prepareDeleteButtons() {
     //   form.innerHTML = form.innerHTML.replace(formNumberRegex, `form-${index}-`);
     //   form.innerHTML = form.innerHTML.replace(formLabelRegex, `DS Data Record ${index+1}`);
     // });
+
+
+
+    let formNumberRegex = RegExp(`form-(\\d){1}-`, 'g');
+    let formLabelRegex = RegExp(`DS Data record (\\d){1}`, 'g');
+
+    forms.forEach((form, index) => {
+      // Iterate over child nodes of the current element
+      Array.from(form.querySelectorAll('label, input, select')).forEach((node) => {
+        // Iterate through the attributes of the current node
+        Array.from(node.attributes).forEach((attr) => {
+          // Check if the attribute value matches the regex
+          if (formNumberRegex.test(attr.value)) {
+            // Replace the attribute value with the updated value
+            attr.value = attr.value.replace(formNumberRegex, `form-${index}-`);
+          }
+        });
+      });
+
+      Array.from(form.querySelectorAll('h2, legend')).forEach((node) => {
+        node.textContent = node.textContent.replace(formLabelRegex, `DS Data record ${index + 1}`);
+      });
+    
+    });
+
+
+
+
   }
 }
 
@@ -316,7 +344,7 @@ function prepareDeleteButtons() {
 
       formNum++;
       newForm.innerHTML = newForm.innerHTML.replace(formNumberRegex, `form-${formNum-1}-`);
-      newForm.innerHTML = newForm.innerHTML.replace(formLabelRegex, `DS Data Record ${formNum}`);
+      newForm.innerHTML = newForm.innerHTML.replace(formLabelRegex, `DS Data record ${formNum}`);
       container.insertBefore(newForm, addButton);
 
       let inputs = newForm.querySelectorAll("input");
@@ -369,6 +397,7 @@ function prepareDeleteButtons() {
       //   form.innerHTML = form.innerHTML.replace(formLabelRegex, `DS Data Record ${index+1}`);
       // });
   }
+
 })();
 
 

src/registrar/forms/domain.py

@@ -180,6 +180,8 @@ class DomainDsdataForm(forms.Form):
 
 DomainDsdataFormset = formset_factory(
     DomainDsdataForm,
+    extra=0,
+    can_delete=True,
 )
 
 
@@ -213,4 +215,6 @@ class DomainKeydataForm(forms.Form):
 
 DomainKeydataFormset = formset_factory(
     DomainKeydataForm,
+    extra=0,
+    can_delete=True,
 )

src/registrar/templates/domain_keydata.html

@@ -90,17 +90,21 @@
       </svg><span class="margin-left-05">Add new record</span>
     </button>
 
-    <button
-          type="button"
-          class="usa-button usa-button--outline btn-cancel"
-      >Cancel
-    </button>
-
     <button
           type="submit"
           class="usa-button"
       >Save
     </button>
   </form>
+
+  <form aria-label="form to undo changes to the DS records">
+    <button
+          type="submit"
+          class="usa-button usa-button--outline btn-cancel"
+          name="btn-cancel-click"
+          aria-label="Reset the data in the DS records to the registry state (undo changes)"
+      >Cancel
+    </button>
+  </form>
   {% endif %}
 {% endblock %}  {# domain_content #}

src/registrar/views/domain.py

@@ -293,6 +293,10 @@ class DomainDsdataView(DomainPermissionView, FormMixin):
                 # Add existing nameservers as initial data
                 initial_data.extend({"key_tag": record.keyTag, "algorithm": record.alg, "digest_type": record.digestType, "digest": record.digest} for record in dnssecdata.dsData)
         
+        # Ensure at least 3 fields, filled or empty
+        while len(initial_data) == 0:
+            initial_data.append({})
+        
         return initial_data
 
     def get_success_url(self):
@@ -345,6 +349,8 @@ class DomainDsdataView(DomainPermissionView, FormMixin):
                 # no server information in this field, skip it
                 pass
         domain = self.get_object()
+        if len(dnssecdata["dsData"]) == 0:
+            dnssecdata = {}
         try:
             domain.dnssecdata = dnssecdata
         except RegistryError as err:
@@ -389,6 +395,10 @@ class DomainKeydataView(DomainPermissionView, FormMixin):
                 # Add existing keydata as initial data
                 initial_data.extend({"flag": record.flags, "protocol": record.protocol, "algorithm": record.alg, "pub_key": record.pubKey} for record in dnssecdata.keyData)
         
+        # Ensure at least 3 fields, filled or empty
+        while len(initial_data) == 0:
+            initial_data.append({})
+        
         return initial_data
 
     def get_success_url(self):
@@ -438,6 +448,8 @@ class DomainKeydataView(DomainPermissionView, FormMixin):
                 # no server information in this field, skip it
                 pass
         domain = self.get_object()
+        if len(dnssecdata["keyData"]) == 0:
+            dnssecdata = {}
         try:
             domain.dnssecdata = dnssecdata
         except RegistryError as err: