I have a django-tables2 template that I’ve modified to assign a unique row id to each row. I’m trying to add a button that will allow a user to delete a given row on a click. I’m using htmx to initiate the deletion request. I also have an htmx enabled edit button that is working as intended regarding sever side modifications and updating the DOM. The delete button behaviour is as expected on the server side, but the swap appears to impact only the button, and not the tag. After clicking the delete button, the record is removed from the database, but only the button disappears on the DOM, not the <tr>. I won’t include the views.py as it’s fairly straightforward in that it retrieves the appropriate record, executes the delete, and returns an empty HTTPResponse.

I’ve tried adding an hx-target with an hx-swap, but this deactivates any htmx call capability on the button. I’ve also tried putting a <div> wrapper around the <tr> and targeted that with my oob swap with no luck.

Here is the table.tbody template with both the edit and the delete buttons:

{% extends 'tablestyle.html' %}
{% load humanize %}
{% block table.tbody %}

<tbody {{ table.attrs.tbody.as_html }}>
    {% for row in table.paginated_rows %}
        {% block table.tbody.row %}
        <tr id="emp_hx_row_{{ row.record.pk }}" {{ row.attrs.as_html }} height="70px">
            {% for column, cell in row.items %}
            <td {{ column.attrs.td.as_html }} class="gls-text-middle">    
                {{ cell }}                           
            </td>
            {% endfor %}
            <td class="gls-flex gls-align-middle">                
                <!-- edit button -->
                <div class="gls-width-auto">
                    <button class="gls-flex gls-flex-center gls-flex-middle" hx-get="{% url 'employment_history_edit' row.record.pk %}" gls-tooltip="title: Edit" title="" aria-expanded="false" tabindex="0">
                        <div class="fa fa-edit fa-xs" style="color:#000000"></div>
                    </button>
                </div>
        
                <!-- delete button -->
                <div class="gls-width-auto gls-margin-small-left">
                    <button class="gls-flex gls-flex-center gls-flex-middle" gls-tooltip="title: Delete" hx-delete="{% url 'employment_history_delete' row.record.pk %}" hx-confirm="Are you sure you wish to delete?" hx-swap-oob="#emp_hx_row_{{ row.record.pk }}">
                        <div class="fa fa-trash fa-xs" style="color:#000000"></div>
                    </button>
                </div>
            </td>
        </tr>
        {% endblock table.tbody.row %}
    {% empty %}
        {% if table.empty_text %}
        {% block table.tbody.empty_text %}
        <tr><td colspan="{{ table.columns|length }}">{{ table.empty_text }}</td></tr>
        {% endblock table.tbody.empty_text %}
        {% endif %}
    {% endfor %}
</tbody>

{% endblock %}