diff --git a/tests/e2e/user-settings.test.e2e.ts b/tests/e2e/user-settings.test.e2e.ts
index 008548be9f..88e6708115 100644
--- a/tests/e2e/user-settings.test.e2e.ts
+++ b/tests/e2e/user-settings.test.e2e.ts
@@ -96,3 +96,16 @@ test('User: Canceling adding SSH key clears inputs', async ({browser}, workerInf
   const content = page.locator('#ssh-key-content');
   await expect(content).toHaveValue('');
 });
+
+test('User: Canceling adding GPG key clears input', async ({browser}, workerInfo) => {
+  const page = await login({browser}, workerInfo);
+  await page.goto('/user/settings/keys');
+  await page.locator('.show-panel[data-panel="#add-gpg-key-panel"]').click();
+
+  const gpgKeyContent = page.locator('#gpg-key-content');
+  await gpgKeyContent.fill('Wront key material');
+
+  await page.locator('.hide-panel[data-panel="#add-gpg-key-panel"]').click();
+
+  await expect(gpgKeyContent).toHaveValue('');
+});
diff --git a/web_src/js/features/common-global.js b/web_src/js/features/common-global.js
index 90f5c11989..56e92379c4 100644
--- a/web_src/js/features/common-global.js
+++ b/web_src/js/features/common-global.js
@@ -5,7 +5,7 @@ import {createDropzone} from './dropzone.js';
 import {showGlobalErrorMessage} from '../bootstrap.js';
 import {handleGlobalEnterQuickSubmit} from './comp/QuickSubmit.js';
 import {svg} from '../svg.js';
-import {hideElem, showElem, toggleElem, initSubmitEventPolyfill, submitEventSubmitter} from '../utils/dom.js';
+import {hideElem, showElem, toggleElem, resetForms, initSubmitEventPolyfill, submitEventSubmitter} from '../utils/dom.js';
 import {htmlEscape} from 'escape-goat';
 import {showTemporaryTooltip} from '../modules/tippy.js';
 import {confirmModal} from './comp/ConfirmModal.js';
@@ -477,38 +477,48 @@ export function initGlobalButtons() {
   // There are many "cancel button" elements in modal dialogs, Fomantic UI expects they are button-like elements but never submit a form.
   // However, Gitea misuses the modal dialog and put the cancel buttons inside forms, so we must prevent the form submission.
   // There are a few cancel buttons in non-modal forms, and there are some dynamically created forms (eg: the "Edit Issue Content")
-  $(document).on('click', 'form button.ui.cancel.button', (e) => {
-    e.preventDefault();
-  });
-
-  $('.show-panel').on('click', function (e) {
-    // a '.show-panel' element can show a panel, by `data-panel="selector"`
-    // if it has "toggle" class, it toggles the panel
-    e.preventDefault();
-    const sel = this.getAttribute('data-panel');
-    if (this.classList.contains('toggle')) {
-      toggleElem(sel);
-    } else {
-      showElem(sel);
+  document.addEventListener('click', (e) => {
+    if (e.target.matches('form button.ui.cancel.button')) {
+      e.preventDefault();
     }
   });
 
-  $('.hide-panel').on('click', function (e) {
-    // a `.hide-panel` element can hide a panel, by `data-panel="selector"` or `data-panel-closest="selector"`
-    e.preventDefault();
-    let sel = this.getAttribute('data-panel');
-    if (sel) {
-      hideElem($(sel));
-      return;
-    }
-    sel = this.getAttribute('data-panel-closest');
-    if (sel) {
-      hideElem($(this).closest(sel));
-      return;
-    }
-    // should never happen, otherwise there is a bug in code
-    showErrorToast('Nothing to hide');
-  });
+  for (const showPanelButton of document.querySelectorAll('.show-panel')) {
+    showPanelButton.addEventListener('click', (e) => {
+      // a '.show-panel' element can show a panel, by `data-panel="selector"`
+      // if it has "toggle" class, it toggles the panel
+      e.preventDefault();
+      const sel = e.currentTarget.getAttribute('data-panel');
+      if (e.currentTarget.classList.contains('toggle')) {
+        toggleElem(sel);
+      } else {
+        showElem(sel);
+      }
+    });
+  }
+
+  for (const hidePanelButton of document.querySelectorAll('.hide-panel')) {
+    hidePanelButton.addEventListener('click', (e) => {
+      // a `.hide-panel` element can hide a panel, by `data-panel="selector"` or `data-panel-closest="selector"`
+      e.preventDefault();
+      let sel = e.currentTarget.getAttribute('data-panel');
+      if (sel) {
+        const element = document.querySelector(sel);
+        hideElem(element);
+        resetForms(element);
+        return;
+      }
+      sel = e.currentTarget.getAttribute('data-panel-closest');
+      if (sel) {
+        const element = e.currentTarget.closest(sel);
+        hideElem(element);
+        resetForms(element);
+        return;
+      }
+      // should never happen, otherwise there is a bug in code
+      showErrorToast('Nothing to hide');
+    });
+  }
 
   initGlobalShowModal();
 }
diff --git a/web_src/js/features/sshkey-helper.js b/web_src/js/features/sshkey-helper.js
index 71caadd5b1..3960eefe8e 100644
--- a/web_src/js/features/sshkey-helper.js
+++ b/web_src/js/features/sshkey-helper.js
@@ -8,10 +8,3 @@ export function initSshKeyFormParser() {
     }
   });
 }
-
-export function initSshKeyCancelButton() {
-  document.getElementById('cancel-ssh-button')?.addEventListener('click', () => {
-    document.getElementById('ssh-key-title').value = '';
-    document.getElementById('ssh-key-content').value = '';
-  });
-}
diff --git a/web_src/js/index.js b/web_src/js/index.js
index 019340fb42..98e57ef450 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -49,7 +49,7 @@ import {initAdminEmails} from './features/admin/emails.js';
 import {initAdminCommon} from './features/admin/common.js';
 import {initRepoTemplateSearch} from './features/repo-template.js';
 import {initRepoCodeView} from './features/repo-code.js';
-import {initSshKeyFormParser, initSshKeyCancelButton} from './features/sshkey-helper.js';
+import {initSshKeyFormParser} from './features/sshkey-helper.js';
 import {initRepoArchiveLinks} from './features/repo-common.js';
 import {initRepoMigrationStatusChecker} from './features/repo-migrate.js';
 import {
@@ -122,7 +122,6 @@ onDomReady(() => {
   initMarkupAnchors();
   initMarkupContent();
   initSshKeyFormParser();
-  initSshKeyCancelButton();
   initStopwatch();
   initTableSort();
   initAutoFocusEnd();
diff --git a/web_src/js/utils/dom.js b/web_src/js/utils/dom.js
index 54f7335186..3d48ff3e15 100644
--- a/web_src/js/utils/dom.js
+++ b/web_src/js/utils/dom.js
@@ -51,6 +51,14 @@ export function isElemHidden(el) {
   return res[0];
 }
 
+export function resetForms(el) {
+  queryElemChildren(el, 'form', resetForm);
+}
+
+function resetForm(form) {
+  form.reset();
+}
+
 function applyElemsCallback(elems, fn) {
   if (fn) {
     for (const el of elems) {