Delete Row

이 예제에서는 삭제 버튼을 구현하여 완료 시 테이블 행을 제거하는 방법을 보여줍니다. 먼저 테이블 본문을 살펴보겠습니다:

<table class="table delete-row-example">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Status</th>
      <th></th>
    </tr>
  </thead>
  <tbody hx-confirm="Are you sure?" hx-target="closest tr" hx-swap="outerHTML swap:1s">
    ...
  </tbody>
</table>

테이블 본문에는 삭제 작업을 확인하기 위한 hx-confirm 속성이 있습니다. 또한 모든 버튼에 대해 가장 가까운 테이블 행(tr)을 타겟으로 설정했습니다. (hx-target 속성은 DOM에서 부모 요소로부터 상속됩니다.) hx-swap 속성의 교체 명세는 타겟 전체를 교체하고 응답을 받은 후 1초 동안 대기하도록 설정되어 있습니다. 이 마지막 부분은 다음 CSS를 사용하여 행이 교체/제거되기 전에 페이드 아웃되도록 하기 위함입니다:

tr.htmx-swapping td {
  opacity: 0;
  transition: opacity 1s ease-out;
}

각 행에는 DELETE 요청을 서버로 보내어 행을 삭제할 수 있는 URL을 포함한 hx-delete 속성이 있는 버튼이 있습니다. 이 요청은 200 상태 코드와 빈 콘텐츠로 응답하여 해당 행을 아무것도 없는 상태로 교체해야 함을 나타냅니다.

<tr>
  <td>Angie MacDowell</td>
  <td>angie@macdowell.org</td>
  <td>Active</td>
  <td>
    <button class="btn danger" hx-delete="/contact/1">
      Delete
    </button>
  </td>
</tr>

🔗Demo