Removing table row after Ajax success - php

Question

I have a table that will display images stored in a DB as well as some other information. I have a column that has a link that the user can click to delete the image, this works fine however when the user does this I also want to remove the row that the user selects to remove but I can't seem to get it to work.
function removeSectionPhoto(image, section_id) {
if(confirm("Are you sure you want to delete this image?") == true) {
$.ajax({
type: "POST",
url: "remove_section_photo.php",
data: 'image='+image+'&sectionID='+section_id,
success: function(data){
//this is supposed to remove the row but currently doesnt work
$("#"+$(this).data("remove-row")).remove();
}
});
}
}
The table rows are being output from PHP, this is what one of the table rows looks like:
echo "<tr id='fac_sec_photo_row". $imageRowCount ."'>";
echo "<td><a><img class='section_photo' src='" . $sectionPhotoRow['photo'] . "' alt='Section Photos' height='50' width='50'</a></td>";
echo "<td><input type='text' id='photoDesc' name='photoDesc[]' value='" . $sectionPhotoRow['photo_desc'] . "'</td>";
echo "<td><input type='file' id='new_section_photo' name='new_section_photo[]' onchange='displaySecImage(this)'></td>";
echo "<td><a href='#' class='removeImageRow' data-remove-row='fac_sec_photo_row". $imageRowCount . "' onClick='removeSectionPhoto(\"". $sectionPhotoRow['photo'] ."\", \"". $facilitySecId ."\")'>Remove</a></td>";
echo "</tr>";
What am I doing wrong, how can I remove the selected table row?

Answer 1

All right. I see part of the issue. You are mixing vanilla javascript with jquery. Jquery does a LOT behind the scenes that hides what javascript doesn't do. Since you are using a vanilla onclick inline on the element, this will likely refer to window, not the element that is being clicked on (I know, confusing). Jquery uses the function.prototype.apply method to re-map this to the target element. Javascript doesn't. But all is not lost, and there is an easy fix. The easiest of which is to just pass in $imageRowCount to your function as well. Then you can simply reference the id directly.
function removeSectionPhoto(image, section_id, row_id) {
if(confirm("Are you sure you want to delete this image?") == true) {
$.ajax({
type: "POST",
url: "remove_section_photo.php",
data: 'image='+image+'&sectionID='+section_id,
success: function(data){
//this is supposed to remove the row but currently doesnt work
$("#"+row_id).remove();
}
});
}
}
And then:
echo "<td><a href='#' class='removeImageRow' onClick='removeSectionPhoto(\"{$sectionPhotoRow['photo']}\", \"{$facilitySecId}\", \"fac_sec_photo_row{$imageRowCount}\")'>Remove</a></td>";
Another option would be to pass in this to the function call in the onclick='removeSectionPhoto(this, ...etc...)' which would give your first argument (or whatever argument number you pass it in) a reference to that variable. Then $(ele).closest('tr').remove() would work.
Really though, you shouldn't mix vanilla js with jquery. Just use jquery to query for the elements and use it's event handlers and this wouldn't have been an issue (well, you still need to map this to self).

Answer 2

pass the $imageRowCount as a third argument into the function and then remove the row that way
echo "<td><a href='#' class='removeImageRow' data-remove-row='fac_sec_photo_row". $imageRowCount . "' onClick='removeSectionPhoto(\"". $sectionPhotoRow['photo'] ."\", \"". $facilitySecId ."\", \"". $imageRowCount ."\")'>Remove</a></td>";
function removeSectionPhoto(image, section_id,imageRowCount ) {
if(confirm("Are you sure you want to delete this image?") == true) {
$.ajax({
type: "POST",
url: "remove_section_photo.php",
data: 'image='+image+'&sectionID='+section_id,
success: function(data){
//this is supposed to remove the row but currently doesnt work
$("#fac_sec_photo_row"+imageRowCount).remove();
}
});
}
}