Recursively delete nested Matrix entries (and their FormObserver's)

Fixes #16540
Resolves #16560
[ci skip]

CHANGELOG.md

@@ -25,6 +25,7 @@
 - Fixed a bug where tooltips were displaying behind slideouts. ([#16529](https://github.com/craftcms/cms/issues/16529))
 - Fixed a bug where field translation indicators and action menu buttons could be autofocussed when creating a new entry within a Matrix field, or opening an element editor slideout. ([#16528](https://github.com/craftcms/cms/issues/16528))
 - Fixed a bug where field values copied from another site weren’t always saving. ([#16537](https://github.com/craftcms/cms/issues/16537))
+- Fixed errors that could occur on Ajax requests when deleting an inline-editable Matrix block. ([#16540](https://github.com/craftcms/cms/issues/16540))
 
 ## 5.6.1 - 2025-01-22
 

src/templates/_components/fieldtypes/Matrix/block.twig

@@ -113,6 +113,7 @@
 {% tag 'div' with {
   class: [
     'matrixblock',
+    'js-deletable',
     not entry.enabled ? 'disabled-entry',
     static ? 'static',
   ]|filter,

src/web/assets/matrix/src/MatrixInput.js

@@ -156,6 +156,14 @@
 
           this.trigger('afterInit');
         }, 100);
+
+        // If this field is nested within something that's deletable, be ready to handle that
+        this.$container.closest('.js-deletable').on('delete', (ev) => {
+          // Ignore delete events that came from nested elements
+          if (ev.target === ev.currentTarget) {
+            this.destroy();
+          }
+        });
       },
 
       canAddMoreEntries: function () {
@@ -356,6 +364,19 @@
       get maxEntries() {
         return this.settings.maxEntries;
       },
+
+      destroy: function () {
+        this.entrySort?.destroy();
+        this.entrySelect?.destroy();
+        delete this.entrySort;
+        delete this.entrySelect;
+
+        this.$entriesContainer.children('.matrixblock').each((i, container) => {
+          $(container).data('entry')?.destroy();
+        });
+
+        this.base();
+      },
     },
     {
       defaults: {
@@ -925,10 +946,12 @@
         }
       }
 
-      this.actionDisclosure.hide();
+      this.actionDisclosure?.hide();
     },
 
     selfDestruct: function () {
+      this.destroy();
+
       // Remove any inputs from the form data
       $('[name]', this.$container).removeAttr('name');
 
@@ -1154,5 +1177,21 @@
       // re-grab dismissible tips, re-attach listener, hide on re-load
       this.matrix.elementEditor?.handleDismissibleTips();
     },
+
+    destroy: function () {
+      this.actionDisclosure?.hide();
+
+      this.tabManager?.destroy();
+      this.actionDisclosure?.destroy();
+      this.formObserver?.destroy();
+      delete this.tabManager;
+      delete this.actionDisclosure;
+      delete this.formObserver;
+
+      // alert any nested inputs that we're getting deleted
+      this.$container.trigger('delete');
+
+      this.base();
+    },
   });
 })(jQuery);