Prologue:
---------

Though I've been dealing with *standard* [1] Ajax calls for a couple months, a simple mistake in my code made me realize today that there's so much more I still haven't grasped, that I feel I need some clarification on the matter.

The fact:
---------

I'm writing an administration interface to add and remove users from a web application written in MVC 5. I had this code calling an action method (eventually executing a stored procedure on a SQL database) and then removing the DOM element showing user's details:

```
$.ajax({
    url: "RemoveUser",
    type: "POST",
    data: {
        userID: userID
    }
}).done(
    $('.row').filter(function () {
        if ($(this).data()["userID"] === userID) {
            return true;
        }
    }).remove()
);

```

While testing, I saw that the action method was being triggered **after** the DOM element being removed. While reviewing the ajax official documentation, I realized that my code within the `done` callback should've been wrapped within a `function () { ... }` block. I changed the code accordingly 

```
$.ajax({
    url: "RemoveUser",
    type: "POST",
    data: {
        userID: userID
    }
}).done(function () {
    $('.row').filter(function () {
        if ($(this).data()["userID"] === userID) {
            return true;
        }
    }).remove();
});

```

and now it all works in the expected order.

Can anyone please shed some light on why the missed wrapping caused this change in the expected behavior?

---

[1] by *standard* I mean simple `GET` or `POST` actions that return DOM elements or basic data.