从 Python 仪表板中删除布局元素答案

【问题标题】：Delete Layout Element From Python Dashboard从 Python 仪表板中删除布局元素
【发布时间】：2020-10-23 12:51:25
【问题描述】：

假设我有一个类似这样的仪表板应用程序......

import dash
from dash.dependencies import Input, Output, State
import dash_html_components as html

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
server = app.server

app.layout = html.Div(
    [
        html.Button(
            'Delete HTML Div', 
            id='delete-div-btn'
        ),
        html.Div(
            [
                #body
            ], id='div_1'
        ),
    ]
)

我想按下按钮来删除 html.Div 元素。我真的不能说我有什么或没有尝试过什么，因为我真的不知道从哪里开始，除了我可能需要一个可能看起来像这样的回调函数......

@app.callback(Output('???', '???'),
    [Input('delete-div-btn', "n_clicks")],
    [State('div_1', '???')]
)

我认为我不能为我的输出调用 div_1，因为 div_1 是我要删除的内容，而这正是让我失望的原因。

（请注意，这是我正在尝试完成的一项更大任务的高度简化版本，但我不想涉及不必要的细节）

【问题讨论】：

标签： python layout dashboard

【解决方案1】：

在您的情况下，您必须修改并输出包含按钮和 div_1 的 html.Div 的“子项”。您可以使用回调从子容器中删除 div_1。首先定义父级html.Div的ID和子级。

类似：

import dash
from dash.dependencies import Input, Output, State
import dash_html_components as html

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
server = app.server

app.layout = html.Div(
    id = 'parent_div', #Define ID
    children = [       #Define children
        html.Button(
            'Delete HTML Div', 
            id='delete-div-btn',
            n_clicks = 0          #Set n_clicks to zero
        ),
        html.Div(
            [
                #body
            ], id='div_1'
        ),
    ]
)

对于回调，您可以使用按钮删除 parent_div 的“children”中的一个元素，并在函数中返回修改后的子容器。由于“孩子”是一个列表，您可以使用 pop()。请注意，回调将在您启动应用程序时运行，因此您必须放置一个 if 语句，以便回调不会在启动时删除对象（或使用 dash.exceptions 中的 PreventUpdate）。 另外，请务必在定义删除按钮时将 'n_clicks' 设置为零，以防止在应用启动时 'n_clicks' 为 None。

类似：

@app.callback(Output('parent_div', 'children'),
              Input('delete-div-btn', 'n_clicks'),
              State('parent_div', 'children'))
def deleteLastElement(n_clicks, container):
  if n_clicks > 0:
    container.pop(-1) # can be used for any index in a children list
  return container

值得考虑的是，如果多次单击，这段代码最终会删除删除按钮本身，具体取决于子容器的长度和容器中删除按钮的位置。因此，将按钮与要删除的对象放在同一个容器中可能不是最佳调用。

答案有点晚，但也许这可以帮助想知道的人！

【讨论】：