Walk and destroy the tree of elements when it is removed from the DOM

packages/alpinejs/src/lifecycle.js

@@ -1,4 +1,4 @@
-import { startObservingMutations, onAttributesAdded, onElAdded, onElRemoved, cleanupAttributes } from "./mutation"
+import { startObservingMutations, onAttributesAdded, onElAdded, onElRemoved, cleanupAttributes, cleanupElement } from "./mutation"
 import { deferHandlingDirectives, directives } from "./directives"
 import { dispatch } from './utils/dispatch'
 import { walk } from "./utils/walk"
@@ -94,5 +94,8 @@ export function initTree(el, walker = walk, intercept = () => {}) {
 }
 
 export function destroyTree(root) {
-    walk(root, el => cleanupAttributes(el))
+    walk(root, el => {
+        cleanupAttributes(el)
+        cleanupElement(el)
+    })
 }

packages/alpinejs/src/mutation.js

@@ -1,3 +1,5 @@
+import { destroyTree } from "./lifecycle"
+
 let onAttributeAddeds = []
 let onElRemoveds = []
 let onElAddeds = []
@@ -39,6 +41,12 @@ export function cleanupAttributes(el, names) {
     })
 }
 
+export function cleanupElement(el) {
+    if (el._x_cleanups) {
+        while (el._x_cleanups.length) el._x_cleanups.pop()()
+    }
+}
+
 let observer = new MutationObserver(onMutate)
 
 let currentlyObserving = false
@@ -173,9 +181,7 @@ function onMutate(mutations) {
 
         onElRemoveds.forEach(i => i(node))
 
-        if (node._x_cleanups) {
-            while (node._x_cleanups.length) node._x_cleanups.pop()()
-        }
+        destroyTree(node)
     }
 
     // Mutations are bundled together by the browser but sometimes