I'm rendering checkboxs with JS and posting data to the controller

<form><table id="tasks"
        border="1" cellspacing="5" cellpadding="10">    <tr>        <td></td>        <td><b>Title</b></td>       <!--<td><b>Actions</b></td>-->    </tr>    <tr data-th-each="task : ${tasks}">        <td><input type="checkbox" th:id="${task.getId().toString()}" name="task_checkbox"></td>        <td> <a th:href="@{'/tasksJournal/'+${journalId}+'/updateTask/'+ ${task.getId().toString()}}" data-th-text="${task. getTitle()}"> </a></td>     <!--<td>            <form th:action="@{'/tasksJournal/'+${journalId}+'/deleteTask/'+ ${task.getId().toString()}}" method="post">                <script>                    function clickHandler() {
                        window.confirm("Do you really want to delete task?");
                    }
                </script>                <button type="submit" value="delete" onclick="clickHandler()"/>                Delete</button>            </form>        </td>-->    </tr></table><section>    <h1></h1></section><div>        <script th:inline="javascript">            function getCheckedTasks(journal_id) {
               let result= new Array();
               let checkboxes= document.getElementsByName("task_checkbox");
               for(let i= 0; i < checkboxes.length; ++i){
                   if(checkboxes[i].checked=== true){
                       result.push(checkboxes.item(i).getAttribute("id"));
                   }
               }
               let resultStr= result[0];
               for(let i= 1; i< result.length; ++i){
                   resultStr= resultStr.concat(',',result[i]);
               }
               let xhr= new XMLHttpRequest();
               let endpoint= "/tasksJournal/"+ journal_id + "/deleteTasks/";
               xhr.open("POST", endpoint);
               xhr.send(resultStr);
            }
        </script>        <button value="Delete" style="float:left; margin-right: 2px" th:onclick="getCheckedTasks([[${journalId}]])"/>        Delete Tasks</button></div></form>

Controller

@PostMapping(Endpoints.DELETE_TASKS)
    public String deleteTasks(@PathVariable(name= PathVariables.JOURNAL_ID) String idJournal,
                                  @RequestBody String ids,
                                  model) {
        String[] stringIds= ids.split(",");
        for (String currentId : stringIds) {
            try {
                taskService.deleteTaskById(UUID.fromString(currentId));
            } catch (DeleteTaskException e) {
                model.addAttribute(ModelAttributes.NOT_FOUND_MESSAGE, e.getMessage());
                return ErrorPages.NOT_FOUND;
            }
        }
        return String.format(PathTemplates.REDIRECT_TO_HOME, idJournal);
    }

After pressing the Delete Task button, the tasks are deleted successfully, however, in the view, the deleted tasks disappear only after the page is refreshed. How to make the selected tasks using checkboxes, after clicking on the Delete Task button, immediately disappear in the view, and not after the user refreshes the page?