When i delete an element i want the page to refresh/reload

[vineshghela]

Hey Everyone,

Ive starting using Htmx recently (originally coming from react)

im using fastapi, jinja and htmx

The issue:
I have several cards on the page which are dynamically generated with a little bin icon. When i hit the bin icon the element does get deleted but it leaves a gap on the page. Im wondering if anyone can help me so i am able to refresh the page once the delete call has been made

<i hx-delete="/library/{{ book.id }}/card/{{ card_data.id }}"
    hx-trigger="click" hx-target="#transaction-row-{{ party_data.id }}"
    hx-confirm="Are you sure you want to delete this party?" 
    hx-swap="outerHTML"
    hx-skip-attributes="hx-trigger,hx-target"
    class="fa-regular fa-trash-can"></i>

[perttisoomann]

Depends on how you handle the cards, if it's in a single container div, it might be just a case of adding/updating some CSS.

Another case might be where you have another div around #transaction-row-{{ party_data.id }} that is not deleted, so it still fills that space.

[Telroshan]

Reloading the whole page for a visual issue sounds a bit extreme to me, as said above it might just be a case of CSS or maybe a trailing HTML element causing some gap.

If you really want to refresh the page though, you might want to look at the HX-Refresh header

[vineshghela]

@Telroshan i agree i think its very over kill, ive provided some more code below which might help give a better idea

{% for book in library_list %}
        <div class="col-md-4 mb-4">
            <div class="card-container">
                <div class="card rounded-3 pt-0 px-1 mb-3 {{party_data.status}}"
                    id="transaction-row-{{ party_data.id }}"
                    style="box-shadow: 8px 8px 5px 0px #00000040;height:308px; background-color:#d3d3d330">
                    <div class="card-front bg-dark">
                        <div class="card-body">
                            <div class="row align-items-center">
                                <div class="col-md-8">
                                    <h5 class="card-title mt-1">{{ book.title | format_tab_name() if
                                        book.title else "TBC" }}</h5>
                                </div>
                                <div class="col-md-4 text-end">
                                    {% if not user.locked %}
                                   <i hx-delete="/library/{{ book.id }}/card/{{ card_data.id }}"
                                       hx-trigger="click" hx-target="#transaction-row-{{ party_data.id }}"
                                       hx-confirm="Are you sure you want to delete this party?" 
                                       hx-swap="outerHTML"
                                       hx-skip-attributes="hx-trigger,hx-target"
                                       class="fa-regular fa-trash-can"></i>
                                    {% endif %}
                                </div>
                            </div>
                            <a hx-get="/library/{{ book.id }}/card/{{ card_data.id }}"
                                hx-target="#modals-here" hx-trigger="click" data-bs-toggle="modal"
                                data-bs-target="#modals-here" style="cursor:pointer">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <strong>Author:</strong>
                                        </div>
                                        <div class="col-md-8">
                                            {{ book.author if book.author else "..." }}
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

[Telroshan]

I don't know what your CSS is for the specific classes but here are some broad tips that may or may not apply:

• You can directly use hx-swap="delete" instead of outerHTML on your card to remove it, if you, as I understood, indeed want to delete it (i.e. swap it with "nothing"). Maybe the inline script element you were swapping in place of the card was applying a gap rule if your container is a flex container for instance?
• Can your card-container contain multiple cards, or is it 1 card-container per card ? If the latter, then your code above only gets rid of the card element (as your hx-delete elt has hx-target="#transaction-row[...]") but not its container, which could also result in an empty container causing some gap

[vineshghela]

@Telroshan - Thank you so much your a life saver!!!!

You were very correct its where the hx-target was, it should have been the outter layer not the inner and then fixed it!