DataTables destroy() memory retention: diagnosing lingering event listeners and DOM references

Answer to the Core Questions

1. Retained‑object patterns that point to DataTables internals

• Objects that still reference the original table element and expose a DataTable key in $.data(element) are almost always DataTables state.
• Event listeners that remain in the element’s __events__ (jQuery) or __listener__ (native) structures and reference settings or api() closures are another hallmark of incomplete cleanup.
• DOM nodes that carry a __dt__ flag or whose __data__ contains a DataTable reference indicate that the table subtree was not fully detached.
• A lingering DataTable instance in window.DataTable or a global registry is a clear leak.

2. Expected cleanup differences: 1.10.x vs 1.13.x

• 1.10.x leaves $.data(element, 'DataTable') and many event listeners in place; destroy() only removes the API‑attached handlers.
• 1.13.x clears the DataTable key, removes most listeners, and detaches tbody nodes, but still requires manual unbinding of listeners added directly via on().
• Both versions nullify settings objects, but 1.13.x does so earlier in the destroy flow.

3. Checks that confirm garbage‑collection eligibility

1. Take a heap snapshot immediately after destroy() and verify that $.data(table, 'DataTable') is undefined.
2. Inspect __events__ (or __listener__) for remaining DataTables handlers; they should be absent.
3. Ensure no DataTable instance remains in window.DataTable or a custom registry.
4. Re‑initialize the same table element; if no "duplicate ID" or "DataTable already exists" warnings appear, the old instance is likely eligible for GC.
5. Run the browser’s GC manually (e.g., Chrome DevTools: window.gc() if --js-flags=--expose-gc is enabled) and confirm that the snapshot size drops.

Practical Diagnostic Steps

1. var dt = $('#myTable').DataTable(); – create instance.
2. dt.destroy(); – invoke the official teardown.
3. Open DevTools → Performance → Take heap snapshot.
4. Filter by DataTable or $.data to locate any remaining references.
5. Check the element’s __events__ property for lingering handlers.
6. Repeat the process with the same table using the 1.13.x build to compare.
7. If custom wrappers (Angular, React, Vue) are used, add a console assertion that the wrapper’s DataTables reference is null after destroy().

What to Watch For in Your Environment

Custom extensions or framework adapters can keep references that destroy() does not touch. If you’re using a wrapper that stores the DataTables instance in component state or a global store, you must clean that manually. Also, listeners added directly via $(element).on() are not automatically removed; they must be unbound explicitly.

Missing Diagnostic Detail

Could you confirm whether your application uses any third‑party DataTables wrappers or custom extensions that might attach their own listeners or data to the table element? This information will help refine the cleanup checklist.