Delete List element (Model) in Index.cshtml without changing the View

[Pablo]

Hello everyone
As mentioned before, I'm working on a Contact List where each one can have a variable number of Telephone objects, in ASP.NET Core MVC. I would like to know how to delete a Contact (and its Telephone objects) from the list (Index.cshtml). I don't know if it would be C#, Javascript, or both, neither how to "connect" that with the button Remove.
This is my Index.cshtml by now (it doesn't work for the mentioned issue)

@model IEnumerable<Contact>

<div class="row">
    <div class="col-lg-12">
        <h2>Contact List</h2>
        <a asp-controller="Contact" asp-action="NewOrEdit" asp-route-id="0" class="btn btn-primary mb-3">New Contact</a>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th width="5%">Id</th>
                    <th width="25%">Full Name</th>
                    <th width="22%">E-Mail</th>
                    <th width="22%">Address</th>
                    <th width="10%">Telephones</th>
                    <th width="16%">Options</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model)
                {
                    <tr>
                        <td>@item.ContactId</td>
                        <td>@item.FullName</td>
                        <td>@item.EMail</td>
                        <td>@item.Address</td>
                        <td>
                            <select>
                                @foreach (var data in item.Telephones)
                                {
                                    <option>@(data.PhoneNumber + " - " + data.Description)</option>
                                }
                            </select>
                        </td>
                        <td>
                            <a asp-controller="Contact" asp-action="NewOrEdit" asp-route-id="@item.ContactId" class="btn btn-sm btn-success">Edit</a>
                            <button type="button" class="btn btn-sm btn-danger" onclick="Delete('@item')">Remove</button>
                        </td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
</div>

<script>
    function Delete(data) {
        $.ajax({
            data: data,
            type: 'DELETE',
            success: function (data) {
                alert(data);
            }
        });
    }
</script>

The only thing I know is the C# code would be (but if it is called then the page would be reloaded)

public void Delete(int id)
{
    Contact contact = _db.Contacts.First(x => x.ContactId == id);
    var telsToDel = _db.Telephones.Where(x => x.ContactId == id).ToList();
    _db.Telephones.RemoveRange(telsToDel);
    _db.Contacts.Remove(contact);
    _db.SaveChanges();
}

This is the Contact Model

    public class Contact
    {
        [Required]
        public int ContactId { get; set; }
        [Required]
        [MaxLength(40)]
        [Display(Name = "Full Name")]
        public string? FullName { get; set; }
        [MaxLength(40)]
        [Display(Name = "E-Mail")]
        public string? EMail {  get; set; }
        [MaxLength(40)]
        public string? Address { get; set; }
        public List<Telephone> Telephones { get; set; } = new List<Telephone>();
        [Display(Name = "Is Active")]
        public bool IsActive { get; set; }
    }

This is the Telephone Model

    public class Telephone
    {
        public int TelephoneId { get; set; }
        public string? Description {  get; set; }
        public string? PhoneNumber { get; set; }
        public int ContactId {  get; set; }
    }

Thank you!
Pablo