CODEWITHSUNDEEP
htmldomdart
tomaszkubacki
tomaszkubacki

Reputation: 3262

What's the proper way of removing DOM element with attached event handlers?

Lets assume I've HTML like this:

<tr id="myRow">
 <td > some text</td>
 <td > some text</td>
...
</tr>

and every TD has attached handler to onClick event.

I would like to remove #myRow childrens in a correct way. Will code below cause memory leak ?

query('#myRow').innerHtml = '';

What's the proper way of removing all child TD elements - not causing memory leak ?

I see similar question here Does remove a DOM object (in Javascript) will cause Memory leak if it has event attached? but it's unclear for me whether removing element will clear event handlers.

Upvotes: 0

Views: 296

Answers (2)

Shailen Tuli
Shailen Tuli

Reputation: 14191

In general, modern browsers will try to ensure that there are no memory leaks when you remove or replace DOM elements. So, you should be able to set the innerHtml or call element.children.clear() without worrying about event handlers causing memory leaks.

One thing, though: you generally want to avoid scenarios where you are adding event handlers that do the same thing to several child elements. It is often more efficient to attach the event handler to the parent and then use the target and currentTarget properties to distinguish between the element where a handler was attached and the element that triggered the event handler.

Upvotes: 6

Christophe Herreman
Christophe Herreman

Reputation: 16085

You can remove all elements like this:

query("#myRow").children.clear();

I assume this will also take care of removing the handlers etc. Nothing specifically about memory issues is written in the docs: https://www.dartlang.org/docs/tutorials/remove-elements/

Upvotes: 2

Related Questions