Building Scalable Applications with Thymeleaf and Spring Boot/

...

/

Deleting Rows

Deleting Rows

Learn how to remove rows dynamically.

We'll cover the following...

All that is left now is to make the “Remove” links work. We’ll add a bit of JavaScript to remove the row that the “Remove” button is part of.

Updating the fragment

Let’s update the edit-teamplayer-fragment:

Press + to interact
<div class="ml-1 sm:col-span-2 flex items-center text-green-600 hover:textgreen-
    900">
    <div class="h-6 w-6">
        <svg th:replace="trash"></svg>
    </div>
    <a href="#"
        class="ml-1"
        th:text="#{team.player.remove}"
        x-data
        th:attr="data-formindex=__${index}__"
        @click="removeTeamPlayerForm($el.dataset.formindex)"> 
    </a>
</div>

We’ll add three attributes to the <a> element:

  • x-data to define a new AlpineJS scope.

  • th:attr to add the current index parameter of the fragment so we can read this from JavaScript and know what row we should delete.

  • @click to trigger the ...