javascript - ajax成功后删除最近的li

Question

我有一个列出所有上传文件的div

$i = 0;
                echo '<div style="float: left;margin-left: 25px;" id="filecontainer">';
                echo "<ul>";
                foreach($editorderdata['uploadedfiles'] as $row){
                    echo '<li>';
                    echo '<a href="'.base_url().'images/userfiles/'.$row['filename'].'" target="_blank">';
                    echo 'file_'.++$i.'</a>';
                    echo '<a href="#" data-fileid="'.$row['filename'].'" title="Remove file" class="removefile">';
                    echo '<img class="cross" src="'.base_url().'images/cross.png">';
                    echo '</a></li>';
                }
                echo "</ul>";
                echo "</div>";

这是在按下 .removefile 类元素时删除所选文件的代码

$(document).ready(function() {
                    $(".removefile").click(function(e) {

                        e.preventDefault();
                        var fileidvar = $(this).data('fileid');
                        if (confirm("Are you sure you want to remove selected file?")) {
                            $.ajax({
                                type: "POST",
                                url:'<?php echo base_url() ?>signup/removefile',
                                data:{ fileid: fileidvar },
                                dataType: 'json',
                                success: function (data) {
                                    if(data.value){
                                        alert(data.value);
                                        $(this).closest("li").remove();
                                    }
                                },
                                error:function(){
                                  alert("Something went wrong, please try again."); 
                                }
                            });
                        }
                        return false;
                    });
                });

代码工作正常，但我想要的是在 ajax 成功时删除父 li，但它不起作用..帮助？

Answer 1

您遇到的问题是 success 处理程序中的 $(this) 不等于被单击的元素。试试这个:

$(".removefile").click(function(e) {
    e.preventDefault();
    var $btn = $(this); // <- save the clicked button to a variable
    var fileidvar = $btn.data('fileid');

    if (confirm("Are you sure you want to remove selected file?")) {
        $.ajax({
            type: "POST",
            url:'<?php echo base_url() ?>signup/removefile',
            data: { fileid: fileidvar },
            dataType: 'json',
            success: function (data) {
                if (data.value) {
                    alert(data.value);
                    $btn.closest("li").remove(); // <- use cached selector here
                }
            },
            error: function() {
                alert("Something went wrong, please try again."); 
            }
        });
    }
    return false;
});