Bring Drag & Drop to Dash with Dashboard Engine. 💫 Learn how at our next webinar!

Deleting a layout element from another callback

Hello,

I’ve been creating a form with Dash. At the moment I have (successfully run) code which has a green add button; when pressed it shows a dropdown datatable which is editable and a remove button next to it.
Since this remove button only shows up in the callback for the add button, I’m not sure how to use callbacks to also remove these forms. From the documentation I think MATCH callbacks would help, but I cant quite seem to figure it out.
Any help very much appreciated!

app.layout = html.Div(
    children=[
        html.H1(children='Technology Information',
                style={'font-family': 'calibri'}),
        dbc.FormGroup([
            dbc.Label('Technology Name:',
                      html_for='tech-name-row',
                      style={'font-family': 'calibri',
                             'margin-right': '4em'}),
            dbc.Col(dbc.Input(type='technology',
                              id='tech-name-row',
                              placeholder='Enter Technology Name',
                              style={'display': 'inline-flex',
                                     'verticalAlign': 'middle',
                                     'height': '25px'}),
                    style={'display': 'inline-flex',
                           'verticalAlign': 'middle'}),
        ], row=True, style={'margin-bottom': '1em'}),
        html.Label(["Technology Type:", dcc.Dropdown(id="tech-type-drop",
                                                     style={'display': 'inline-block',
                                                            'width': '175px',
                                                            'height': '28px',
                                                            'margin-left': '2.3em',
                                                            # 'margin-bottom': '2.5em',
                                                            'verticalAlign': 'middle',
                                                            'font-size': '15px'},
                                                     placeholder='Select Type',
                                                     options=[
                                                        {"label": "Type 1", "value": "1"},
                                                        {"label": "Type 2", "value": "2"},
                                                        {"label": "Type 3", "value": "3"}])],
                   style={'font-family': 'calibri',
                          'margin-right': '4em',
                          'display': 'flex'}),
        html.H1('                                   '),
        html.H1('                                   '),
        html.H2('Process Information',
                style={'font-family': 'calibri',
                       'margin-right': '0.5em',
                       'margin-top': '3em',
                       'display': 'inline'}),
        html.Button(children='+',
                    id='add_process_button',
                    style={'background-color': '#38BC23',
                           'display': 'inline'}),
        html.Div(id='process_list', children=[]),
    ]
)


@app.callback(
    Output('process_list', 'children'),
    [Input('add_process_button', 'n_clicks')],
    [State('process_list', 'children')])
def add_step(add_clicks, div_list):

    if add_clicks is not None:
        div_list += [html.Div(children=[
            html.Button(children='-',
                        id='remove_process_button',
                        style={'background-color': 'red',
                               'display': 'inline',
                               'float': 'right',
                               'margin': '1em'}),
            dbc.Col(
                dbc.FormGroup(
                    [dbc.Label("Process Name",
                               html_for="process-name",
                               style={'font-family': 'calibri',
                                      'margin-right': '2em'}),
                     dbc.Input(id="process-name",
                               placeholder="Enter Process Name")],
                    style={'margin': '1em'})),
            html.Div(children=[
                dash_table.DataTable(id='process-table',
                                     data=[{}],
                                     style_table={'margin': '2em', 'width': '90%', 'display': 'inline-block'},
                                     style_cell={'font-family': 'calibri', 'textAlign': 'left'},
                                     columns=[{'id': 'Product', 'name': 'Product', 'presentation': 'dropdown'},
                                              {'id': 'Function', 'name': 'Function', 'presentation': 'dropdown'},
                                              {'id': 'Conversion Factor', 'name': 'Conversion Factor',
                                               'presentation': 'dropdown'},
                                              {'id': 'Measure Unit', 'name': 'Measure Unit',
                                               'presentation': 'dropdown'}],
                                     editable=True,
                                     dropdown={'Product': {'options': [{'label': i, 'value': i} for i in
                                                                       ['Benzene', 'HDPE', 'Propylene']]},
                                               'Function': {'options': [{'label': i, 'value': i} for i in
                                                                        ['Input1', 'Input2', 'Input3']]},
                                               'Conversion Factor': {'options': [{'label': i, 'value': i} for i in
                                                                                 ['1', '2', '3']]},
                                               'Measure Unit': {'options': [{'label': i, 'value': i} for i in
                                                                            ['Tonne', 'Kilo', 'Gram']]},
                                               }), html.Div(id='process-table-container')
            ])], style={'border': '2px black solid',
                        'margin': '1em'}
        )]
    return div_list

Hi @dem26 and welcome to the Dash forum :slight_smile:

Here is an example of deleting an element using pattern matching callbacks: Pattern call-backs regarding adding dynamic graphs

@AnnMarieW That was perfect, thank you!! :slight_smile:

1 Like