Não consigo pegar o campo de um item da lista | JavaScript: programando na linguagem da web

<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
    lang="pt-b" layout:decorate="~{layout}">
    <head>
        <meta charset="UTF-8"/>
    </head>
    <div class="body-padrao"  layout:fragment="corpo">
        <div class="card-header pr-2 pl-2 pb-3 pt-3">
            <div class="input-group input-group-sm">
                <i class="fas fa-users mt-1" id="estilo-icone"></i>
                <span class="div-titulo-consulta mt-1">Consulta cadastro de clientes</span>
                <div class="input-group-prepend">
                    <span class="input-group-text ml-3" id="inputGroup-sizing-sm">Nome</span>
                </div>
                <input type="text" class="form-control">
                <div class="input-group-prepend" id="button-addon3">
                    <a th:href="@{/cadastros/listaClientesJuridica}">
                        <button class="estilo-botao ml-3">Buscar
                            <i class="fas fa-search"></i>
                        </button>
                    </a>
                    <a th:href="@{/cadastros/clientesJuridica}">
                        <button class="estilo-botao-sair ml-2">Sair
                            <i class="fas fa-times-circle ml-2"></i>
                        </button>
                    </a>
                </div>
            </div>
        </div>
        <div class="card-body tabelaClientes tabela-clientes">
            <table class="table table-striped table-hover table-sm table-bordered">
                <thead>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">Nome</th>
                        <th scope="col">e-mail</th>
                        <th scope="col" style="text-align: center;">Editar</th>
                        <th scope="col" style="text-align: center;">Excluir</th>
                    </tr>
                </thead>
                <tbody>
                    <tr th:each="cl : ${clientes}" class="tabela-clientes">
                        <td class="listaID" th:text="${cl.id}" ></td>
                        <td class="listaNome" th:text="${cl.nome}"></td>
                        <td class="listaEmail" th:text="${cl.email}"></td>
                        <td class="listaEditar" style="text-align: center;">
                            <button class="estilo-botao-editar-lista">
                                <i class="fas fa-edit icone-editar"></i>
                            </button>
                        </td>
                        <td class="listaExcluir" style="text-align: center;">
                            <button class="estilo-botao-exluir-lista">
                                <i class="fas fa-trash icone-excluir"></i>
                            </button>
                        </td>
                   </tr>    
                </tbody>
            </table>
        </div>

boa noite, quando eu clicar no botão class=estilo-botao-exluir-lista quero pegar o campo referente o ID do item da lista que foi clocado. Alguem sabe como devo fazer isto?

Fala Misael, tudo bem Maninho? Espero que sim.

Cara, não sei se esta forma que testei é a mais adequada, mas lá vai:

No seu HTML eu adicionei o evento onclick chamando a função excluir()

<td class="listaExcluir" style="text-align: center;">
                            <button class="estilo-botao-exluir-lista" onclick=excluir()>
                                <i class="fas fa-trash icone-excluir">Excluir</i>
                            </button>

No JavaScript, criei a função excluir():

function excluir(){
    debugger; // para debugar no navegador
    var tagClassId = document.querySelector(".listaID");
    var idCliente = tagClassId.textContent;

}

Assim eu consegui chegar na tag de classe listaID

obs.: adicionei o debugger, que pode nos ajuda a depurar o código pelo navegador... você pode comentar ou excluir essa linha se achar necessário.

Espero ter ajudado.

Abraços e bons estudos!