Add Edit buttons to "Delete Row" example

[senyai]

Hi everyone!

I'm trying to add an Edit button for each row in the HTMX delete row example. Unfortunately, I'm running into some issues and haven't been able to get it working correctly.

One specific problem I'm facing is that the tbody element has an hx-confirm attribute, but I only want this confirmation to apply to the .danger button. Can I do it without attribute repetition?

I'd really appreciate any guidance or suggestions you might have!

Thanks in advance!

[MILLERMARRU]

hx-confirm is an inheritable attribute in htmx, any descendant that issues a request picks it up from the nearest ancestor that sets it, which is exactly why putting it on tbody applies it to every button underneath, including the Edit button you don't want confirmed. You don't need to repeat or restructure anything, htmx has a documented escape hatch for exactly this: set hx-confirm="unset" on the specific element you want to opt out, and inheritance stops there for that attribute.

<tbody hx-confirm="Are you sure?">
  <tr>
    <td>
      <button class="danger" hx-delete="/row/1">Delete</button>
      <button hx-confirm="unset" hx-get="/row/1/edit">Edit</button>
    </td>
  </tr>
</tbody>

That keeps the confirmation on .danger (and any other delete buttons you add later, since it's still inherited from tbody for everything that doesn't explicitly unset it) while the Edit button issues its hx-get with no dialog at all. No attribute repetition needed on new rows either, since the inheritance is what's doing the work, you're just carving out the one exception.