deleted record not removing from list knockout

Question

Records (comment) are nested in foreach loop. When i delete record it deletes from database but does not remove from list. It removes from list when i refresh page.

my html code is :

<span data-bind="foreach:showAds">
    //some stuff
    <span data-bind="foreach:showComment">
        <span data-bind="attr:{'id':id}">
            <span data-bind="text:description"></span>
            <span data-bind="text:postedById"></span>
            <span data-bind="click:function(){ $parent.deleteComment($data.id)}">delete</span>
        </span>
    </span>
</span>

js code is :

 function comment(data) {
        var self = this;
        data = data || {};
        self.description = ko.observable(data.description);
        self.postedById = data.postedById;
        self.adId = data.adId;
        self.id = data.id;
    }
    function ad(data) {
        var self = this;
        data = data || {};
        //some stuff
        self.showComment = ko.observableArray();
        if (data.comment) {
            var cmt = $.map(data.comment, function (item) { return new comment(item); });
            self.showComment(cmt);
        }
        self.deleteComment = function (id) {
            $.ajax({
                url: '/api/Comment/DeleteComment/' + id,
                dataType: "json",
                contentType: "application/json",
                cache: false,
                type: 'POST',
                success: function (data) {
                    //Also how to map single object? $.map() is not working  for single object so I mapped it manually.
                    var com = new comment();
                    com.id = data.Id;
                    com.description = data.description;
                    com.adId = data.adId;
                    self.showComment.remove(com); //whats wrong here?
                },
                error: function () {
                    toastr.error("failed to delete comment", "Error!");
                }
            });
        }
    }
    function viewModel() {
        var self = this;
        self.showAds = ko.observableArray();
        //load data using ajax and map in showAds.
    }
    ko.applyBindings(new viewModel());

Answer 1

Check out this official documentation example

<ul data-bind="foreach: places">
    <li>
        <span data-bind="text: $data"></span>
        <button data-bind="click: $parent.removePlace">Remove</button>
    </li>
</ul>

 <script type="text/javascript">
     function MyViewModel() {
         var self = this;
         self.places = ko.observableArray(['London', 'Paris', 'Tokyo']);

         // The current item will be passed as the first parameter, so we know which place to remove
         self.removePlace = function(place) {
             self.places.remove(place)
         }
     }
     ko.applyBindings(new MyViewModel());
</script>

See that the first argument is the current element (so you could ask for the element id).

self.deleteComment = function (comment) {
    $.ajax({
        url: '/api/Comment/DeleteComment/' + comment.id,
        type: 'POST',
        success: function (data) {
            self.showComment.remove(comment);
        }
    });
}

Remember now to use the click method without creating a new function

click: $parent.deleteComment

instead of

click: function(){ $parent.deleteComment($data.id)}

Answer 2

Try using a custom remove() function. the normal remove is trying to match up an object that matches exactly, and you aren't populating all the fields. Since you already have the id, just use that:

    self.deleteComment = function (id) {
        $.ajax({
            url: '/api/Comment/DeleteComment/' + id,
            dataType: "json",
            contentType: "application/json",
            cache: false,
            type: 'POST',
            success: function (data) {
                self.showComment.remove(function(item){
                    return item.id == id;
                }); 
            },
            error: function () {
                toastr.error("failed to delete comment", "Error!");
            }
        });
    }