Remove the dialog from the DOM after it has been closed

diff --git a/ts/WoltLabSuite/Core/Element/woltlab-core-dialog.ts b/ts/WoltLabSuite/Core/Element/woltlab-core-dialog.ts
index 1e439355d8d88f6923375724e8251283462adbf1..c72267e77814d2112d6f2985e2cab264eb8f9d1a 100644 (file)
--- a/ts/WoltLabSuite/Core/Element/woltlab-core-dialog.ts
+++ b/ts/WoltLabSuite/Core/Element/woltlab-core-dialog.ts
@@ -57,11 +57,11 @@ export class WoltlabCoreDialogElement extends HTMLElement {
 
     this.#title.textContent = title;
 
-    if (this.#dialog.parentElement === null) {
-      if (dialogContainer.parentElement === null) {
-        document.getElementById("content")!.append(dialogContainer);
-      }
+    if (dialogContainer.parentElement === null) {
+      document.getElementById("content")!.append(dialogContainer);
+    }
 
+    if (this.parentElement !== dialogContainer) {
       dialogContainer.append(this);
     }
 
@@ -79,6 +79,13 @@ export class WoltlabCoreDialogElement extends HTMLElement {
 
     releasePageOverlayContainer(this.#dialog);
     scrollEnable();
+
+    // Remove the dialog from the DOM, preventing it from
+    // causing any collisions caused by elements with IDs
+    // contained inside it. Will also cause the DOM element
+    // to be garbage collected when there are no more
+    // references to it.
+    this.remove();
   }
 
   get dialog(): HTMLDialogElement {

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Element/woltlab-core-dialog.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Element/woltlab-core-dialog.js
index e8a54ce83e6b8e7c0012b7720a3e1ec522d3cebe..1ac3615fe56c3f4d18d3c79f0110184b97700ea8 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Element/woltlab-core-dialog.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Element/woltlab-core-dialog.js
@@ -32,10 +32,10 @@ define(["require", "exports", "tslib", "../Dom/Util", "../Helper/PageOverlay", "
                 throw new Error("Cannot open the modal dialog without a title.");
             }
             this.#title.textContent = title;
-            if (this.#dialog.parentElement === null) {
-                if (dialogContainer.parentElement === null) {
-                    document.getElementById("content").append(dialogContainer);
-                }
+            if (dialogContainer.parentElement === null) {
+                document.getElementById("content").append(dialogContainer);
+            }
+            if (this.parentElement !== dialogContainer) {
                 dialogContainer.append(this);
             }
             this.#dialog.showModal();
@@ -48,6 +48,12 @@ define(["require", "exports", "tslib", "../Dom/Util", "../Helper/PageOverlay", "
             this.dispatchEvent(event);
             (0, PageOverlay_1.releasePageOverlayContainer)(this.#dialog);
             (0, Screen_1.scrollEnable)();
+            // Remove the dialog from the DOM, preventing it from
+            // causing any collisions caused by elements with IDs
+            // contained inside it. Will also cause the DOM element
+            // to be garbage collected when there are no more
+            // references to it.
+            this.remove();
         }
         get dialog() {
             return this.#dialog;