introduce group.remove(element) zauberzeug#145

README.md

@@ -129,7 +129,7 @@ docker run -p 80:8080 -v $(pwd)/:/app/ -d --restart always zauberzeug/nicegui:la
 
 The example assumes `main.py` uses the port 8080 in the `ui.run` command (which is the default).
 The `--restart always` makes sure the container is restarted if the app crashes or the server reboots.
-Of course this can also be written in a docker compose file:
+Of course this can also be written in a Docker compose file:
 
 ```yaml
 nicegui:

api_docs_and_examples.py

@@ -375,6 +375,8 @@ def update_line_plot() -> None:
     clear_containers = '''#### Clear Containers
 
 To remove all elements from a row, column or card container, use the `clear()` method.
+
+Alternatively, you can remove individual elements with `remove(element)`, where `element` is an Element or an index.
 '''
     with example(clear_containers):
         container = ui.row()
@@ -385,6 +387,7 @@ def add_face():
         add_face()
 
         ui.button('Add', on_click=add_face)
+        ui.button('Remove', on_click=lambda: container.remove(0))
         ui.button('Clear', on_click=container.clear)
 
     with example(ui.expansion):

nicegui/elements/group.py

@@ -1,6 +1,6 @@
 from __future__ import annotations
 
-from typing import List
+from typing import List, Union
 
 import justpy as jp
 
@@ -62,3 +62,8 @@ def collect_components(view: jp.HTMLBaseComponent) -> List[jp.HTMLBaseComponent]
 
         self.view.delete_components()
         self.update()
+
+    def remove(self, element: Union[Element, int]) -> None:
+        view = element.view if isinstance(element, Element) else self.view.get_components()[element]
+        self.view.remove_component(view)
+        self.update()

tests/test_element.py

@@ -1,4 +1,3 @@
-
 from nicegui import ui
 from nicegui.elements.element import Element
 from selenium.webdriver.common.action_chains import ActionChains

tests/test_groups.py

@@ -0,0 +1,34 @@
+from nicegui import ui
+
+from .screen import Screen
+
+
+def test_remove_and_clear(screen: Screen):
+    with ui.row() as row:
+        ui.label('Label A')
+        b = ui.label('Label B')
+        ui.label('Label C')
+
+    ui.button('Remove B', on_click=lambda: row.remove(b))
+    ui.button('Remove 0', on_click=lambda: row.remove(0))
+    ui.button('Clear', on_click=lambda: row.clear())
+
+    screen.open('/')
+    screen.should_contain('Label A')
+    screen.should_contain('Label B')
+    screen.should_contain('Label C')
+
+    screen.click('Remove B')
+    screen.should_contain('Label A')
+    screen.should_not_contain('Label B')
+    screen.should_contain('Label C')
+
+    screen.click('Remove 0')
+    screen.should_not_contain('Label A')
+    screen.should_not_contain('Label B')
+    screen.should_contain('Label C')
+
+    screen.click('Clear')
+    screen.should_not_contain('Label A')
+    screen.should_not_contain('Label B')
+    screen.should_not_contain('Label C')