I have a SPA application that relies heavily on creating and destroying DataTables and Editors. It's been a while since I noticed that, over time, memory footprint increases, along with detached nodes. After trying to fix it several times I finally gave up, until today I gave Copilot access to my page and it found the following:

_Opening 'View Items' creates DateTime and AutoFill plugin listeners that are not fully unbound when the DataTable is destroyed. The leaked handler sources identify the plugins:
DataTables DateTime handlers:
function(t,e){e.oLanguage.datetime&&(g.extend(!0,o.c.i18n,e.oLanguage.datetime),o._optionsTitle())}

DataTables AutoFill handler:
function(){0<f("div.dt-autofill-handle").length&&void 0!==e.dom.attachedTo&&e._attach(e.dom.attachedTo)}
_

After this analysis, it came up with the following code, which to my surprise solved the increasing memory footprint:

const $ = window.jQuery;
const DataTable = $?.fn?.dataTable;

function normalizeNamespace(namespace) {
    if (!namespace) {
        return '';
    }

    return namespace.startsWith('.') ? namespace : `.${namespace}`;
}

function getEventEntries(target, eventName) {
    const events = $._data?.(target, 'events') || {};
    return Array.isArray(events[eventName]) ? events[eventName].slice() : [];
}

function getAddedEntries(beforeEntries, afterEntries) {
    const beforeSet = new Set(beforeEntries);
    return afterEntries.filter((entry) => !beforeSet.has(entry));
}

function appendNamespace(entry, namespace) {
    if (!entry || !namespace) {
        return;
    }

    const namespaceToken = normalizeNamespace(namespace).slice(1);

    if (!namespaceToken) {
        return;
    }

    const namespaceParts = (entry.namespace || '').split('.').filter(Boolean);

    if (!namespaceParts.includes(namespaceToken)) {
        namespaceParts.push(namespaceToken);
        namespaceParts.sort();
        entry.namespace = namespaceParts.join('.');
    }
}

function patchDateTime() {
    const DateTime = DataTable?.DateTime || window.DateTime;

    if (!DateTime?.prototype?._constructor || !DateTime?.prototype?.destroy) {
        return;
    }

    const originalConstructor = DateTime.prototype._constructor;
    const originalDestroy = DateTime.prototype.destroy;

    DateTime.prototype._constructor = function (...args) {
        const beforeEntries = getEventEntries(document, 'i18n');
        const result = originalConstructor.apply(this, args);
        const namespace = normalizeNamespace(this?.s?.namespace);

        if (!namespace) {
            return result;
        }

        const addedEntries = getAddedEntries(beforeEntries, getEventEntries(document, 'i18n'));

        addedEntries.forEach((entry) => appendNamespace(entry, namespace));

        return result;
    };

    DateTime.prototype.destroy = function (...args) {
        const namespace = normalizeNamespace(this?.s?.namespace);

        if (namespace) {
            $(document).off(namespace);
        }

        return originalDestroy.apply(this, args);
    };
}

function patchAutoFill() {
    const AutoFill = DataTable?.AutoFill;

    if (!AutoFill?.prototype?._constructor || !AutoFill?.prototype?.enable || !AutoFill?.prototype?.disable) {
        return;
    }

    const originalConstructor = AutoFill.prototype._constructor;
    const originalEnable = AutoFill.prototype.enable;
    const originalDisable = AutoFill.prototype.disable;

    AutoFill.prototype._constructor = function (...args) {
        const result = originalConstructor.apply(this, args);
        const namespace = normalizeNamespace(this?.s?.namespace);

        if (namespace && this?.s?.dt) {
            this.s.dt.on(`destroy${namespace}.cleanup`, () => {
                $(window).off(namespace);
            });
        }

        return result;
    };

    AutoFill.prototype.enable = function (...args) {
        const beforeResizeEntries = getEventEntries(window, 'resize');
        const beforeOrientationEntries = getEventEntries(window, 'orientationchange');
        const result = originalEnable.apply(this, args);
        const namespace = normalizeNamespace(this?.s?.namespace);

        if (!namespace) {
            return result;
        }

        const addedResizeEntries = getAddedEntries(beforeResizeEntries, getEventEntries(window, 'resize'));
        const addedOrientationEntries = getAddedEntries(beforeOrientationEntries, getEventEntries(window, 'orientationchange'));

        addedResizeEntries.forEach((entry) => appendNamespace(entry, namespace));

        addedOrientationEntries.forEach((entry) => appendNamespace(entry, namespace));

        return result;
    };

    AutoFill.prototype.disable = function (...args) {
        const result = originalDisable.apply(this, args);
        const namespace = normalizeNamespace(this?.s?.namespace);

        if (namespace) {
            $(window).off(namespace);
        }

        return result;
    };
}

if ($ && DataTable && !window.__dataTablesCleanupPatchInstalled) {
    window.__dataTablesCleanupPatchInstalled = true;
    patchDateTime();
    patchAutoFill();
}

Decided to leave this here in case you want to investigate or anyone else faces the same issue.

Regards,