Make modal controller creatable and destroyable

app/webpacker/controllers/mixins/useOpenAndCloseAsAModal.js

@@ -11,7 +11,7 @@ export const useOpenAndCloseAsAModal = (controller) => {
       });
     }.bind(controller),
 
-    close: function () {
+    close: function (_event, remove = false) {
       this.modalTarget.classList.remove("in");
       this.backgroundTarget.classList.remove("in");
       document.querySelector("body").classList.remove("modal-open");
@@ -19,6 +19,7 @@ export const useOpenAndCloseAsAModal = (controller) => {
       setTimeout(() => {
         this.backgroundTarget.style.display = "none";
         this.modalTarget.style.display = "none";
+        if (remove) { this.element.remove() }
       }, 200);
     }.bind(controller),
 

app/webpacker/controllers/modal_controller.js

@@ -3,13 +3,20 @@ import { useOpenAndCloseAsAModal } from "./mixins/useOpenAndCloseAsAModal";
 
 export default class extends Controller {
   static targets = ["background", "modal"];
+  static values = { instant: { type: Boolean, default: false } }
 
   connect() {
     useOpenAndCloseAsAModal(this);
     window.addEventListener("modal:close", this.close.bind(this));
+
+    if (this.instantValue) { this.open() }
   }
 
   disconnect() {
     window.removeEventListener("modal:close", this.close);
   }
+
+  remove(event) {
+    this.close(event, true)
+  }
 }