The card that disappears and wanders to the end

Dash Python
1

Hi all,
I want my app to display 4 card, when button above is cliced and confirmed the Cardbody should disappear and should be shifted at the end here is my code:
EDIT: Idk why but disappearing dosent work and i dont know how to program this shift any tips? :slight_smile:

from dash import Dash, html, dcc, dash_table
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output

app = Dash(__name__,external_stylesheets=[dbc.themes.DARKLY])
# Format is: 'Card No.' : [It value, it cost]
data = {    "Card 1": [5,2],
            "Card 2": [3,3],
            "Card 3": [4,3],
            "Card 4": [1,3],
}


data_sorted = dict(sorted(data.items(),key=lambda x:x[1]))


def make_card(Card, list):
    nu = Card.split(" ")[1]
    value = list[0]
    cost = list[1]

    return html.Div([

        html.Div([
          dcc.ConfirmDialogProvider(children=[dbc.Button('Dissapire',
                                    
                                                    n_clicks=0,
                                                    color = 'ffffff')],

                                id=f'confirm-danger-{nu}',
                                message='Are you sure you?'

                            )
                ]),           
            dbc.Card(children=[
                    dbc.CardHeader(html.H3(Card)),
                    dbc.CardBody(id=Card,children=[
                                html.H5([f"Value: {value}"]),
                                html.H4([f"cost: {cost}"])
                         ],style={'textAlign': 'center'}),
                ],
                
        )
     ])
app.layout= dbc.Container([dbc.Row([
                                    dbc.Col(make_card(k, v)) for k, v in data_sorted.items()
                                    ])
                         ],fluid=True)

for i in range(1,5):
        @app.callback([Output(f'Card '+str(i), 'style')],
                    Input(f'confirm-danger-'+str(i), 'submit_n_clicks'))
        def display_confirm(n):
                if not n: return {'display':'block'}
                if n %2 == 0:
                        return {'display':'block'}
                else:
                        return {'display':'none'}
if __name__ == '__main__':
	app.run(debug=True)
2

HI @NorbiRad and welcome to the Dash community :slightly_smiling_face:

Check out this example with Pattern Matching Callbacks. It doesn’t re-arrange the cards, but you could do that if necessary.