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

Dash Python
1

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).

profiles
profiles1868×353 15.6 KB

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?

2

I’m curious about any suggested patterns here as well