Black Lives Matter. Please consider donating to Black Girls Code today.

Implimenting push button to delete an input field

Hello all,
I m newbie in Plotly And I would like to have some help.
I m trying to add a pushbutton that deletes the filter that i add with the button add filter. And I didn’t succeed :confused:


here is the line that I m using

 if deleteclick==None:
    new_children = html.div([...])
    children.append(new_children)
else : 
    children.pop()
    deleteclick= None

I have already read this documentation https://dash.plotly.com/pattern-matching-callbacks and it didn’t really help me

Here’s an example for adding and removing graphs. This should help you do the same with filters.

app = dash.Dash(__name__)

app.layout = html.Div([
    html.Div(children=[
        html.Button(
            'Add Chart', id='add-chart', n_clicks=0,
            # style={'display': 'inline-block'}
        ),
    ]),

    html.Div(id='container', children=[]),
    html.Button('Remove Chart', id='remove-chart', n_clicks=0),
])


@app.callback(
    Output('container', 'children'),
    [Input('add-chart', 'n_clicks'),
     Input('remove-chart', 'n_clicks')],
    [State('container', 'children')],
    prevent_initial_call=True
)
def display_graphs(add_clicks, remove_clicks, div_children):
    ctx = dash.callback_context
    triggered_id = ctx.triggered[0]['prop_id'].split('.')[0]

    if triggered_id == 'add-chart':
        new_child = html.Div(
            children=[
                dcc.Graph(
                    id={
                        'type': 'dynamic-graph',
                        'index': add_clicks
                    },
                    figure={}
                ),
            ]
        )
        div_children.append(new_child)

    elif triggered_id == 'remove-chart' and len(div_children) > 0:
        div_children = div_children[:-1]

    return div_children
1 Like

It works perfectly :slight_smile: Thanks a lot.
Can you explain me what

ctx = dash.callback_context
triggered_id = ctx.triggered[0]['prop_id'].split('.')[0]

is doing.
keep on making good video quality :slight_smile:

Hi Yacine,

We have two inputs, so it helps determine which input was clicked on by user. See this document for a deeper explanation, under the section “Determining which Input has fired with…”

https://dash.plotly.com/advanced-callbacks

1 Like