A saved reference of an element that does not exist (JS)

[ZigglerPL]

Body

Hello, how can I bypass the reference of an element that no longer exists in the DOM structure?

My problem is that as a result of asynchronous addition of elements to a container that initially contains one element, this element is removed when the first element is added to the container, but its reference remains when using, for example, the children method.

Guidelines

• I have read and understood this category's guidelines before making this post.

[Mriganka69]

When dealing with asynchronous addition and removal of elements in the DOM, it’s essential to handle references correctly to avoid issues like the one you described

• Check Existence Before Using References:
  Before accessing an element, verify its existence. For example, if you’re using the children method, ensure that the parent container still contains the element you’re trying to reference.

• Use Event Delegation:
  Instead of attaching event listeners directly to individual elements, consider using event delegation. Attach the listener to a higher-level container (such as the parent) and handle events based on the target element.

• Mutation Observers:
  Use the MutationObserver API to watch for changes in the DOM. When an element is removed, update your references accordingly.

[ZigglerPL]

Thanks for the information.

[ZigglerPL]

in general I tried to use this type of ways: container.querySelectorAll(":scope > *"), container.map(function(element) {return container.includes(element)}), container.map(function(element) {return element instanceof htmlElement}) and other ways to solve it, but I don't remember all of them. They all failed.

[ebndev]

Hey @ZigglerPL,

Thanks for posting in the community! Can you explain what you mean by "reference remains when using, for example, the children method"?

[ZigglerPL]

The fact that the children method also takes a reference to an element that actually no longer exists in the DOM structure.