What is the difference between .remove(), .detach() and .empty(), and how do you avoid memory leaks?

Summary

.remove() removes elements and also their jQuery data and event handlers; .detach() removes elements but keeps data and handlers so you can reinsert them; .empty() removes all child nodes (and their data and handlers) but keeps the element.

Longer Answer

Memory leaks in jQuery pages usually come from: removing elements with native DOM methods (or innerHTML = ...), which leaves jQuery's data and handlers in memory; handlers bound on window or document by widgets that are never destroyed; and closures referencing large detached DOM trees. Use jQuery's removal methods for elements managed by jQuery, unbind global handlers on teardown (namespaces help), and check heap snapshots for detached DOM nodes.

Key Points

• remove: elements + data + handlers.
• detach: keeps data and handlers.
• empty: removes children.
• Native removal can leak jQuery data.

Deep dive: Code Clinic: review a jQuery shopping cart script