Bootstrap modal + Thymeleaf + Spring Boot - Mostrar janela modal de confirmação antes de deletar registro

Estou tentando excluir um item na minha view, que está em uma tabela do bootstrap. Estou usando thymeleaf + bootstrapno frontend. A ideia é pegar o id e passar pra uma janela modal do bootstrap e através da modal excluir o registro no banco. Mas não estou conseguindo passar o id pra função ajax excluir o registro. Alguém pode me ajudar? x.x

Segue os trechos de código:

HTML + JavaScript

<td><!-- th:href="${'/delete/' + user.id}" -->
<a class="btn btn-danger btn-xs" data-toggle="modal" th:href="'#'+${cliente.id}" >Excluir</a>
<!-- Modal Excluir -->
<div class="modal fade" id="deleteModal" th:id="${cliente.id}" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
 <div class="modal-dialog" role="document">
 
    <div class="modal-content">
      <div class="modal-header">
	 <button type="button" class="close" data-dismiss="modal" aria-label="Fechar"><span aria-hidden="true">&times;</span></button>
	 <h4 class="modal-title" id="modalLabel">Excluir Item</h4>
     </div>
     <div class="modal-body">Deseja realmente excluir este item? </div>
     <div class="modal-footer">
       <button type="button" class="btn btn-primary" id="deleteCliente">Sim</button>
       <button type="button" class="btn btn-default" data-dismiss="modal">Não</button>
     </div>
   </div>
 </div>
</div><!-- Fim Modal Excluir -->
</td>
</tr>

<script>					
$(document.this).ready(function () {
	$('#deleteCliente').on("click", function(e){
	      e.preventDefault();						
	    
	      var Id = parseInt($(this).closest("td").attr("cliente.id"));
									
	      $.ajax({
	          type:"GET",
	          url:"/deleteClient",
	          data:{id:Id},
                  success:function (data) {
	            	   $("#clientes"+id).closest("td#"+data).parent("tr").remove();
		          }
                  });	
						        	
	      });
	});
</script>

JAVA

//Esse é o metodo do meu controler
@RequestMapping(value = "/deleteClient/{id}", method = RequestMethod.GET)
@ResponseBody
public String delete(@PathVariable("id")  Long id) {
    clientService.deleteClient(id);
    return id.toString();

}

https://hastebin.com/acuyikufum.xml

Coloca um link ao lado de cada linha que terá a função de deletar com o id como parâmetro. Criei um seletor jQuery para acionar uma função javascript que vai pegar o id do parâmetro e adicionar em um input do tipo hidden no seu modal, e em seguida chamar o modal. No modal você chama a função do ajax.

Seria algo como isso:

<tr th:each="cliente : ${clientes}">
				<td th:text="${cliente.nome}"></td>
				<td> outros parâmetros ... </td>			
				<td><a th:attr="onclick = ${ 'modalRemover(' + cliente.id + ')' }" href="#">Deletar</a></td>
</tr>
<div class="modal-content">
  <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-label="Fechar"><span aria-hidden="true">&times;</span></button>
 <h4 class="modal-title" id="modalLabel">Excluir Item</h4>
 </div>
 
 <!-- Implemente a chamada do Ajax -->
 <div class="modal-body">Deseja realmente excluir este item?
    	<input id="modal-deletar-cliente-id" type="hidden" name="id"/> 
 </div>

 <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="deleteCliente">Sim</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Não</button>
 </div>
 <script>		
			
      $(document.this).ready(function () {
	$('#deleteCliente').on("click", function(e){
	      e.preventDefault();						
	    
	      var Id = parseInt($("#modal-deletar-cliente-id").val());
									
	      $.ajax({
	          type:"GET",
	          url:"/deleteClient",
	          data:{id:Id},
                  success:function (data) {
	            	   $("#clientes"+id).closest("td#"+data).parent("tr").remove();
		          }
                  });	
						        	
	      });
	});

    function modalRemover(id){
	  $("#modal-deletar-cliente-id").val(id);
	  $("#deleteModal").modal('show');	
    };
</script>