Remove duplicate form errors

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

@@ -236,8 +236,60 @@ function handleValidationClick(e) {
   for(const button of activatesValidation) {
     button.addEventListener('click', handleValidationClick);
   }
+
+  
+  // Add event listener to the "Check availability" button
+  const checkAvailabilityButton = document.getElementById('check-availability-button');
+  if (checkAvailabilityButton) {
+    const targetId = checkAvailabilityButton.getAttribute('validate-for');
+    const checkAvailabilityInput = document.getElementById(targetId);
+    checkAvailabilityButton.addEventListener('click', function() {
+      removeFormErrors(checkAvailabilityInput);
+    });
+  }
+
+  // Add event listener to the alternate domains input
+  const alternateDomainsInputs = document.querySelectorAll('[auto-validate]');
+  if (alternateDomainsInputs) {
+    for (const domainInput of alternateDomainsInputs){
+      // Only apply this logic to alternate domains input
+      if (domainInput.classList.contains('alternate-domain-input')){
+          domainInput.addEventListener('input', function() {
+            removeFormErrors(domainInput);
+          });
+        }
+    }
+    }
 })();
 
+/**
+ * Removes form errors surrounding a form input
+ */
+function removeFormErrors(input){
+  // Remove error message
+  const errorMessage = document.getElementById(`${input.id}__error-message`);
+  if (errorMessage) {
+    errorMessage.remove();
+  }
+
+  // Remove error classes
+  if (input.classList.contains('usa-input--error')) {
+    input.classList.remove('usa-input--error');
+  }
+
+  const label = document.querySelector(`label[for="${input.id}"]`);
+  if (label) {
+    label.classList.remove('usa-label--error');
+
+    // Remove error classes from parent div
+    const parentDiv = label.parentElement;
+    if (parentDiv) {
+      parentDiv.classList.remove('usa-form-group--error');
+    }
+  }
+
+
+}
 
 /**
  * Prepare the namerservers and DS data forms delete buttons

src/registrar/templates/application_dotgov_domain.html

@@ -53,6 +53,7 @@
       {% endwith %}
     {% endwith %}
     <button
+      id="check-availability-button"
       type="button"
       class="usa-button"
       validate-for="{{ forms.0.requested_domain.auto_id }}"
@@ -73,7 +74,7 @@
       {# attr_validate / validate="domain" invokes code in get-gov.js #}
       {# attr_auto_validate likewise triggers behavior in get-gov.js #}
       {% with append_gov=True attr_validate="domain" attr_auto_validate=True %}
-        {% with add_class="blank-ok" %}
+        {% with add_class="blank-ok alternate-domain-input" %}
           {% for form in forms.1 %}
             {% input_with_errors form.alternative_domain %}
           {% endfor %}