Trying to delete row from database with JS and PHP not working [duplicate]

I got this main PHP file (index.php), its has an html button with an int value and onclick it calls a JS function on the same file.

The JS function receives the value of the button and should send a POST request to another PHP file with the button’s value.

Then the PHP should execute another function.

Finally it comes back to the first html/JS file. I don’t know if it isn’t sending the request or what.

Button (index.php):
<input name="delete" class="imageButton" id="deleteButton" type="submit" value="<?php echo "{$id}";?>" onclick="pr()">

JS Function (index.php):

function pr() {
  if (confirm("¿Borrar contacto con id: " + document.getElementById("deleteButton").value  + "?")) {
    jQuery.ajax({
      url: "./Utils/DeleteContact.php",
      type: "POST",
      data: {"deleteContact": document.getElementById("deleteButton").value}
    });
    window.location.href = "./Utils/DeleteContact.php";
  }
}

DeleteContact.php:

<?php
    //TODO
    if (isset($_POST["deleteContact"])) {
        deleteContact($_POST["deleteContact"]);
        header("../index.php");
    }

    function deleteContact(int $id) {
        $delete = "delete from registros where id = {$id}";

        try {
            mysqli_query($_SESSION["connection"], $delete);
        } catch (mysqli_sql_exception) {
            echo '<p style="color: red;">Error al borrar contacto</p>';
        }
    }
?>

don’t know much of JS yet, tried using JQuery.post, get, ajax, using a variable for the ajax data and replacint JQuery. for $.