✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

How to assign a callback to a dynamically created button to remove the card associated with it?

Hello,

I’m new to dash and I’m using it for my university project meaning I have very little time left for error and trials.

Basically, I’m using dash-cytoscape to create a network of people. When a node is selected I dynamically create a bootstrap card that represents person’s profile. In that card, I create a button with an intended function of closing that card (I could not figure out how to use the graph to deselect the node).

While I’ve seen examples of how you can use pattern matching calls to add new elements I can’t get to remove them. Also, when pressing the actual button it’s as if no callback is assigned to it.

This is the part of the bootstrap card that I use:

dbc.Col([
        dbc.Card(
            children=[
                dbc.CardHeader(...),
                dbc.CardBody(...),
                dbc.CardFooter([
                    html.Button(
                        'Close',
                        id={
                            'type': 'close-profile',
                            'index': data['id']
                        },
                        value=str(data['id']),
                        className='btn')
                ])
            ])
    ])

And for how I’m trying to reference it

@app.callback(
    [
        ...
    ],
    [
        Input({'type': 'close-profile', 'index': ALL}, 'value')
    ])

While the value gets registered on a node click, perhaps because that’s when the card is built, pressing the button has no effect.

Any ideas how I can attach an event to a button such that I can collect the id of the button clicked and remove it from a list of selected nodes?

I’m curious about any suggested patterns here as well