0

I am using BeginCollectionItem to dynamically add items (in this case, Comments) to a list. In attempting to "remove" an item I have run into an issue. I can remove an 'existing' item from the UI using jQuery without issue using the following code:

        var container = $(this).closest('.editorRow');
    var id = container.data('id');
    if (!id) {
        $(this).parents("div.editorRow:first").remove();
        e.preventDefault();
        e.stopImmediatePropagation();
        return false;
    }

But that code will not remove an item that has just been added to the view and not already saved to the database.

The other problem is, I don't want to remove it from the UI until it is removed from the database. I tried using the same code in the success function of the ajax call but now it will not remove the div from the UI. The ajax call works, but when it his the remove line, it does not update the UI.

else {
        $.ajax({
            type: "POST",
            url: "@Url.Action("Delete","Request", new { area = "" })",
            data: { CommentId: id },
            success: function () {
                $(this).parents("div.editorRow:first").remove();

            }
        })

    }

Update

Changing the ajax portion to this allowed for the deleting of the div in the UI, but now after briefly showing me that it deleted the div it redirects me to the login page of my app.

        else {
        $.ajax({
            type: "POST",
            url: "@Url.Action("Delete","Request", new { area = "" })",
            data: { CommentId: id },
            success: function (e) {
                $t.parents("div.editorRow:first").remove();
                        e.preventDefault();
                    e.stopImmediatePropagation();
                return false;

            }
        })

    }
Rani Radcliff
  • 4,856
  • 5
  • 33
  • 60
  • 1
    What do you expect `$(this)` to reference inside of the `success` function? There are multiple options for referencing the element inside of the `.ajax` `success` function, please see this SO post - (https://stackoverflow.com/questions/2643798/how-to-access-the-this-inside-ajax-success-callback-function/12744411) – Ryan Wilson Dec 08 '20 at 21:05
  • 1
    As well as this one: (https://stackoverflow.com/questions/6394812/this-inside-of-ajax-success-not-working) – Ryan Wilson Dec 08 '20 at 21:12
  • The div container " var container = $(this).closest('.editorRow'); var id = container.data('id');" Is that not correct? – Rani Radcliff Dec 08 '20 at 21:12
  • 1
    Inside of the success callback function `this` no longer references the element, it references the `jqXHR` object. You should either follow some of the suggestions in the links I gave you above, or switch from using `this` to using one of those variables you declared outside the `ajax` – Ryan Wilson Dec 08 '20 at 21:14
  • Okay, thanks. I am trying the suggestions there. I am just learning jQuery so everything is new. I appreciate the help. – Rani Radcliff Dec 08 '20 at 21:15
  • No problem. Glad to help. Have a good day. – Ryan Wilson Dec 08 '20 at 21:15
  • @RyanWilson following the suggestions and changing (this) to $t did remove it from the UI but then I am redirected to the login page of my app. This was happening before and someone told me to use e.preventDefault() and e.stopImmediatePropagation those additions didn't help me here. At least it is being removed from the UI now so I am a step closer. – Rani Radcliff Dec 08 '20 at 21:24

0 Answers0