Mobaz Mobaz - 23 days ago 10
Javascript Question

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?

Answer

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(); 
    });
});