Ajax function working without refreshing the page

Question

Data is being deleted but I can't see the ajax function working without refreshing the page.

I use thymeleaf. I have to refresh the page to see the data is deleted. What am I doing wrong in the code?

function deleteUser(userId) {
    var id = userId;
    var token = $("meta[name='_csrf']").attr("content");
    $.ajax({
        type : "DELETE",
        url : "/deleteUser/" + userId,
        contentType: "application/json",
        dataType : 'json',
        headers: 
           'X-CSRF-TOKEN': token
        },
        success: function (data) {
        console.log(data);
        },
        error: function (e) {
            console.log(e);
        }
    });
    }

<table id="myTable" class="table table-striped">
    <thead>
        <tr>
            <th>Value1</th>
            <th>Value2</th>
            <th>Value3</th>
        </tr>
    </thead>
    <tbody>
        <tr th:each="data: ${list}">
            <td th:text="${data.username}"></td>
            <td th:text="${data.email}"></td>
            <td th:text="${data.id}"></td>
            <td>
                <a href="#" data-toggle="modal"
                   data-target="#myModal"
                   th:onclick="@{update('{username}', '{email}', '{id}')(username=${data.username}, email=${data.email}, id=${data.id})}">
                   <i class="fa fa-gear" style="font-size: 20px;"></i>
                </a>
                <a href="#" th:id="${data.id}"
                    onClick="deleteUser(this.id)">
                    <i class="fa fa-trash" style="margin-left: 10px; font-size: 20px; color: red">
                    </i>
                </a>
            </td>
        </tr>
    </tbody>
</table>