CODEWITHSUNDEEP
javascriptjqueryjson
Mobaz
Mobaz

Reputation: 595

Navigating a JSON object

total noob here:

I've got a JSON result coming to a .on('click') function which looks like this:

{"1411939719-8696.jpeg":true}

I want to remove a line in a table, based on where the call came from, but for some reason it's not working:

$('#fileupload').fileupload({
    dataType: 'json',
    done: function (e, data) {
        $.each(data.result.files, function (index, file) {
            $('<p/>').text(file.name).appendTo(document.body);
            var del = $('<button/>')
                .addClass('btn btn-danger')
                .attr('data-type', 'DELETE')
                .attr('data-url', file.deleteUrl)
                .text('DELETE');


               var thumb =  $('<img />', 
                   { id: file.thumbnailUrl+'_ID',
                     src: file.thumbnailUrl, 
                     alt:'MyAlt'}); 

               $('#preview').find('tbody')
                 .append($('<tr>')
                    .append($('<td>').append(thumb))
                    .append($('<td>').append(del))
                 );
                });


          }
    });

and the on click function is here:

$(document).on("click", ".btn-danger", function () {
$.ajax({
    url: $(this).attr("data-url"),
    type: $(this).attr("data-type")
}).done(function (result) {
             $(this).closest("tr").remove(); // to remove the complete row after delete success
        });
});

I need to remove the row that contains the delete button, along with the thumbnail image, but this code isn't working?

Upvotes: 0

Views: 69

Answers (1)

herbertp.
herbertp.

Reputation: 192

I think you are calling the wrong scope.

Maybe this could work:

$(document).on("click", ".btn-danger", function () {
  //save scope-object to that
  var that = this;
  $.ajax({
    url: $(this).attr("data-url"),
    type: $(this).attr("data-type")
  }).done(function (result) {
    $(that).closest("tr").remove(); 
    });
});

Upvotes: 1

Related Questions