Ajax成功后删除表行 - Removing table row after Ajax success

我有一个表，它将显示存储在DB中的图像以及一些其他信息。我有一个列，有一个链接，用户可以点击删除图像，这工作得很好，但是当用户这样做时，我也想删除用户选择删除的行，但我似乎不能让它工作。

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

从PHP输出表行，这是其中一个表行的样子:

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>";

我做错了什么，我如何删除所选表行?

好的。我看到了部分问题。你混合了javascript和jquery。Jquery在幕后做了很多隐藏javascript不能做的事情。由于您在元素上使用的是普通的onclick，因此this可能指的是window，而不是被点击的元素(我知道，这很令人困惑)。Jquery使用function.prototype.apply方法将this重新映射到目标元素。Javascript不。但并非一切都完了，有一个简单的解决办法。最简单的方法是将$imageRowCount传递给您的函数。然后你可以直接引用这个id。

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

然后:

echo "<td><a href='#' class='removeImageRow' onClick='removeSectionPhoto('"{$sectionPhotoRow['photo']}'", '"{$facilitySecId}'", '"fac_sec_photo_row{$imageRowCount}'")'>Remove</a></td>";

另一种选择是将this传递给onclick='removeSectionPhoto(this, ...etc...)'中的函数调用，这将为您的第一个参数(或您传递给它的任何参数号)提供对该变量的引用。那么$(ele).closest('tr').remove()就可以了。

说真的，你不应该把普通的js和jquery混在一起。只需使用jquery来查询元素并使用它的事件处理程序，这就不会是一个问题(好吧，您仍然需要将this映射到self)。

将$imageRowCount作为第三个参数传递给函数，然后以这种方式删除行

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