Identifying Detached DOM Elements in JavaScript

// This creates a detached DOM element
let cachedElement = document.getElementById("sidebar");
 
// Remove from DOM
cachedElement.parentNode.removeChild(cachedElement);
 
// `cachedElement` still holds the reference
// The entire subtree (all children) is retained in memory
console.log(cachedElement.children.length); // Still accessible
 
// FIX: null out the reference
cachedElement = null; // Now GC can collect it

// 1. Cached DOM queries
class WidgetManager {
  constructor() {
    // These references survive even after elements are removed
    this.header = document.querySelector(".header");
    this.sidebar = document.querySelector(".sidebar");
    this.footer = document.querySelector(".footer");
  }
 
  removeSidebar() {
    this.sidebar.remove();
    // BUG: this.sidebar still references the detached node
  }
 
  // FIX: null out on removal
  removeSidebarFixed() {
    this.sidebar.remove();
    this.sidebar = null;
  }
}
 
// 2. Event handlers retaining parent elements
function setupCard(card) {
  const button = card.querySelector(".delete-btn");
 
  button.addEventListener("click", () => {
    card.remove();
    // BUG: this closure still references `card`
    // The event listener on `button` also retains `card`
  });
}
 
// FIX: clean up references
function setupCardFixed(card) {
  const button = card.querySelector(".delete-btn");
  const controller = new AbortController();
 
  button.addEventListener("click", () => {
    card.remove();
    controller.abort(); // Remove this listener
  }, { signal: controller.signal });
}
 
// 3. Array/Map storing DOM elements
const elementCache = [];
 
function cacheElement(el) {
  elementCache.push(el);
}
 
function removeElement(el) {
  el.remove();
  // BUG: el is still in elementCache
 
  // FIX: remove from cache too
  const index = elementCache.indexOf(el);
  if (index > -1) elementCache.splice(index, 1);
}

function isDetached(element) {
  if (!element || element.nodeType !== Node.ELEMENT_NODE) return false;
  return !document.documentElement.contains(element);
}
 
// Scan an object for detached DOM references
function findDetachedReferences(obj, visited = new WeakSet()) {
  const detached = [];
 
  if (!obj || typeof obj !== "object" || visited.has(obj)) {
    return detached;
  }
 
  visited.add(obj);
 
  if (obj instanceof HTMLElement) {
    if (isDetached(obj)) {
      detached.push({
        element: obj.tagName,
        id: obj.id,
        classes: obj.className,
        childCount: obj.querySelectorAll("*").length,
      });
    }
    return detached;
  }
 
  // Recursively scan object properties
  const keys = obj instanceof Map
    ? [...obj.values()]
    : Object.values(obj);
 
  for (const value of keys) {
    if (value && typeof value === "object") {
      detached.push(...findDetachedReferences(value, visited));
    }
  }
 
  return detached;
}
 
// Usage: check a component for detached references
const component = {
  element: document.createElement("div"),
  children: [document.createElement("span")],
};
 
// After removing from DOM...
document.body.appendChild(component.element);
document.body.removeChild(component.element);
 
console.log(findDetachedReferences(component));
// [{ element: "DIV", id: "", classes: "", childCount: 0 }]

class DOMTracker {
  constructor() {
    this.tracked = new Map();
    this.registry = new FinalizationRegistry((label) => {
      this.tracked.delete(label);
    });
  }
 
  track(label, element) {
    if (!(element instanceof HTMLElement)) return;
 
    this.tracked.set(label, {
      ref: new WeakRef(element),
      tagName: element.tagName,
      id: element.id,
      trackedAt: Date.now(),
    });
 
    this.registry.register(element, label);
  }
 
  getDetached() {
    const detached = [];
 
    for (const [label, entry] of this.tracked) {
      const element = entry.ref.deref();
 
      if (!element) {
        // Already garbage collected
        this.tracked.delete(label);
        continue;
      }
 
      if (!document.documentElement.contains(element)) {
        detached.push({
          label,
          tagName: entry.tagName,
          id: entry.id,
          ageMs: Date.now() - entry.trackedAt,
          estimatedSize: this.estimateSize(element),
        });
      }
    }
 
    return detached;
  }
 
  estimateSize(element) {
    const nodes = element.querySelectorAll("*").length + 1;
    const textLength = element.textContent.length;
    // Rough estimate: ~1KB per node + text bytes
    return nodes * 1024 + textLength * 2;
  }
 
  getStats() {
    const all = [...this.tracked.values()];
    const alive = all.filter((e) => e.ref.deref() !== undefined);
    const attached = alive.filter(
      (e) => document.documentElement.contains(e.ref.deref())
    );
    const detached = alive.length - attached.length;
 
    return {
      tracked: this.tracked.size,
      alive: alive.length,
      attached: attached.length,
      detached,
      collected: this.tracked.size - alive.length,
    };
  }
 
  report() {
    console.group("[DOMTracker] Report");
    console.table(this.getStats());
 
    const detached = this.getDetached();
    if (detached.length > 0) {
      console.warn("Detached elements found:");
      console.table(detached);
    } else {
      console.log("No detached elements found.");
    }
    console.groupEnd();
  }
}
 
// Usage
const tracker = new DOMTracker();
 
// Track important elements
document.querySelectorAll("[data-component]").forEach((el) => {
  tracker.track(el.dataset.component, el);
});
 
// Periodic check
setInterval(() => tracker.report(), 10000);

class SafeComponent {
  constructor(container) {
    this.container = container;
    this.elements = new Map();
    this.cleanups = [];
  }
 
  createElement(tag, className) {
    const el = document.createElement(tag);
    if (className) el.className = className;
    this.elements.set(className || tag, el);
    return el;
  }
 
  addEventListener(element, event, handler) {
    const controller = new AbortController();
    element.addEventListener(event, handler, { signal: controller.signal });
    this.cleanups.push(() => controller.abort());
  }
 
  observeIntersection(element, callback) {
    const observer = new IntersectionObserver(callback);
    observer.observe(element);
    this.cleanups.push(() => observer.disconnect());
  }
 
  observeMutations(element, callback, options) {
    const observer = new MutationObserver(callback);
    observer.observe(element, options);
    this.cleanups.push(() => {
      observer.takeRecords();
      observer.disconnect();
    });
  }
 
  destroy() {
    // 1. Run all cleanups (listeners, observers)
    this.cleanups.forEach((fn) => fn());
    this.cleanups = [];
 
    // 2. Remove from DOM
    if (this.container.parentNode) {
      this.container.remove();
    }
 
    // 3. Null out all element references
    this.elements.clear();
    this.container = null;
  }
}
 
// Usage
const widget = new SafeComponent(document.getElementById("widget"));
 
const title = widget.createElement("h2", "title");
title.textContent = "Widget Title";
widget.container.appendChild(title);
 
widget.addEventListener(title, "click", () => console.log("clicked"));
 
// Later: full cleanup, no detached DOM
widget.destroy();

function scanForDetachedDOM() {
  const results = {
    scannedProperties: 0,
    detachedNodes: [],
    totalRetainedNodes: 0,
  };
 
  const visited = new WeakSet();
 
  function scan(obj, path) {
    if (!obj || typeof obj !== "object" || visited.has(obj)) return;
 
    try {
      visited.add(obj);
    } catch {
      return; // WeakSet cannot hold primitives or frozen objects
    }
 
    if (obj instanceof HTMLElement && !document.documentElement.contains(obj)) {
      const childCount = obj.querySelectorAll("*").length;
      results.detachedNodes.push({
        path,
        tagName: obj.tagName,
        id: obj.id || "(none)",
        childCount,
      });
      results.totalRetainedNodes += childCount + 1;
      return; // Do not recurse into detached DOM children
    }
 
    const keys = Object.keys(obj);
    results.scannedProperties += keys.length;
 
    for (const key of keys.slice(0, 100)) {
      try {
        const value = obj[key];
        if (value && typeof value === "object") {
          scan(value, `${path}.${key}`);
        }
      } catch {
        // Skip inaccessible properties
      }
    }
  }
 
  // Scan window-level objects (be selective to avoid browser internals)
  const targets = ["app", "store", "cache", "state", "components", "widgets"];
  for (const key of targets) {
    if (window[key]) {
      scan(window[key], `window.${key}`);
    }
  }
 
  return results;
}
 
// Usage
const scanResult = scanForDetachedDOM();
console.log("Detached nodes found:", scanResult.detachedNodes.length);
console.log("Total retained nodes:", scanResult.totalRetainedNodes);
scanResult.detachedNodes.forEach((n) => {
  console.warn(`${n.path}: <${n.tagName}> #${n.id} (${n.childCount} children)`);
});