How to eliminate memory leaks when removing an element from the DOM if the event handler is stored in a global object?

Memory leaks when removing an element from the DOM often occur if event handlers referencing that element or related objects are not properly removed, especially if they are stored in global objects.

To prevent leaks:

• Always remove all event handlers attached to the element using removeEventListener before removing the element from the DOM.
• If the handler is stored in a global object, ensure you remove the reference to the element within that handler or completely delete the handler if it is no longer needed.
• Use weak references (WeakMap/WeakSet) to store references to DOM elements in global objects so that garbage collection can free the memory.

Example of removing an event handler:

const handler = function(event) { /* ... */ };
const elem = document.getElementById('myElement');

// Add event handler
elem.addEventListener('click', handler);

// When removing the element:
elem.removeEventListener('click', handler);
elem.parentNode.removeChild(elem);

// If the handler is stored globally, clear the reference:
globalHandlers['myElement'] = null;

This way, you break all references to the element and its handlers, allowing garbage collection to free the memory.