Remove a specific component from the container

[me21]

There is a method called clear which removes the children of a container. But is there a way to remove the specific child component?
In addition, this method removes JustPy objects, but does it remove corresponding NiceGUI wrappers?

[rodja]

Interesting. We worked around this in our own projects by wrapping the elements which need to be removed into another row/column. This group can then be cleared individually. Another approach is to not remove the elements but simply change their visibility to False.

But there may be cases where both approaches are not ideal. We need to investigate this further. Do you think we need have a remove(element: Element) and remove_at(position: int)?

[me21]

I thought about remove(element: Element). Index can be counted as the order of creation or the order of on-screen position, which could be misleading if we somehow add a component before the previous one. Or this can't be easily done?

Anyway, adding a row without any gap/margin as a workaround should be good enough, thank you!

[falkoschindler]

I added a group.remove(element) method, where element is either an Element or an index.

The operation is not very efficient in terms of bandwidth, since the whole container is sent to the client with the one element missing. But it should be handy in some situations nonetheless. (In version 1.0 will will probably support manipulating the DOM without re-transmitting the whole subtree again and again.)

[falkoschindler]

By the way: Like clear, remove doesn't delete the NiceGUI element, but only removes it from the DOM. It's up to you to delete all references (if any) and let the garbage collector free the memory.

[me21]

Thank you. How do I remove the references? Consider:

with ui.row()
    ui.label("label")

Are there any references to the label object? In this code there is none; are there any inside NiceGUI?
If I execute "clear" or "remove" methods, will label object be eventually freed by garbage collector?

[falkoschindler]

No, NiceGUI doesn't keep references to UI elements. But if you would assign elements to global variables or add them to a list, for example, you would need to get rid of them after calling remove (e.g. setting the variable to None or removing it from a list with del labels[0]). Otherwise the garbage collector won't be allowed to free the space.

You're right: In your example there are no references to the label kept. So the GC can automatically remove it.

[me21]

@falkoschindler I see that in clear method you update active_links and binding_list variables whereas in remove method you do not. Is it how it's supposed to be?

Although in JustPy it's similar: delete_components method calls delete for each component, whereas remove_component just removes component from the list.

[falkoschindler]

@me21 Thanks for pointing this out! The behavior is indeed inconsistent. I will have a closer look.

[falkoschindler]

This issue is fix since NiceGUI 1.0.