Search⌘ K
AI Features
Home
Courses
Building Scalable Applications with Thymeleaf and Spring Boot

Deleting Rows

Explore how to enable row deletion in Thymeleaf forms using AlpineJS and JavaScript within Spring Boot. Understand how to handle validation errors by removing empty form objects before saving. Learn to implement a custom validator to maintain data integrity while managing dynamic form entries.

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:

HTML
<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 actual removal of the row when the link is clicked. ...