Question

我有一个表格，可以显示存储在数据库中的图像以及其他一些信息。我有一个列，其中有一个用户可以单击以删除图像的链接，但这很好，但是当用户执行此操作时我还想删除用户选择要删除的行，但我似乎无法将其删除工作

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

我做错了什么，如何删除所选的表格行？

Answer 1

好的。我看到了部分问题。你正在混合vanilla 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）。

Answer 2

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

在Ajax成功后删除表行

2 个答案: