Question

A long explanation but I believe this is a pretty simple question. I think I’m missing something here.

After selecting a user role from a dropdown menu I’m loading a partial view with users for that role into a DIV with ajax:

        $.ajax({
        type: 'post',
        data: { id: roleId},
        url: '@Url.Action("Manage","User")',
        success: function (data) {
            $("#user-manage").html(data);
        }
    });

Now, on the page I have a combobox with the list of users and a Delete button.
I highlight a user, press the Delete button and user gets deleted.

Great! It works ,however my problem is that the deleted user doesn’t disappear from the Combobox list until the page is refreshed. And I can’t refresh the page because that’d mean that web site user would have to start over with selecting the Role.

So, the question is how can I make the user disappear on the combobox as soon as I hit that delete button ?

Right now when the delete button is pressed the selected UserId is passed the following ajax call that deletes a selected user and returns the updated JSON user list:

    function removeUser() {
    var selectedUser = $("#user-combo").find(":selected").val(); //grab selected user
    var selectedForRole = $("#role-id").val(); //hidden field to store selected role

    $.ajax({
        url:"/User/Delete", //Delete selected user and return updated Json list
        data: { id: selectedUser , roleId: selectedForRole },
        type: 'post',
        success: function (data) {
            var userList = $("#user-combo");
            var listContent;

            $.each(data, function (index, item) {
                listContent += "<option value='" + item.Id + "'>" + item.Name + "</option>";
            });

            userList.html(listContent);
        }
    });
}    

Functionally this works. The user gets deleted but I don’t see it reflected on the $(“#user-combo”) box until I refresh the screen.

location.reload(); doesn’t work for me as I don’t want the web site user to go through selecting a role to see the updated list of users.

How can I make this interactive and users disappear when I delete them and appear when add them later on ?

Thank you in advance.

Edit.
Json object returned to the combobox:

return Json(roleUsers.Select(x => new
            {
                Id = x.Id,
                Name = x.Name
            }));

Answer 1

It is as simple as this:

$("#comboBox option[value='USER-NAME']").remove();

Put this in your removeUser(). function.

In fact the function must not olny remve the user from the remote list, but also from the DOM.
Hpe this help.