Add_component + remove_from_parent = leaks in the DOM?

The app linked below uses the add_component to add a form to the main form, then uses remove_from_parent to remove it.

When add_component runs, one div is added.

When remove_from_parent runs that div is not removed.

Is it working as designed or is it a leak?

https://anvil.works/build#clone:4HT6H7HR7NORVCNH=MWVKYEJF5EU7K2OAM3P76226

It’s an implementation detail, but a deliberate one. Short answer: if you want to avoid those (invisible) <div>s, use a LinearPanel instead of a ColumnPanel (or GridPanel). But it won’t affect your performance unless you’re doing something pretty unusual, so I’d suggest leaving it how it is.

(Technical details, in case you’re interested: For containers that can add multiple components to a row, such as ColumnPanels and GridPanels, we need to keep a placeholder so that if someone adds a new component with the same coordinates - eg the same row= value in a GridPanel - it goes into the same place. LinearPanels don’t have named rows, so they don’t have this constraint. This is very unlikely to be relevant to anyone - browsers carry thousands of elements around all the time - but if you’re doing lots of add/remove cycles, and you have evidence that those zero-height <div>s have a performance impact, you should use a LinearPanel.)