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

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

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

Answer 2

试试看，

if (confirm("Are you sure you want to remove selected file?")) {
    var self=this;// make a copy of this to self and use it in ajax function
    $.ajax({
         type: "POST",
         url:'<?php echo base_url() ?>signup/removefile',
         data:{ fileid: fileidvar },
         dataType: 'json',
         success: function (data) {
            if(data.value){
               alert(data.value);
               $(self).closest("li").remove();// use self in place of this
            }
         },
         error:function(){
             alert("Something went wrong, please try again."); 
         }
    });
}

Answer 3

Problem $(this) is not the element clicked .

so we cache the selector here var this1 = $(this);

$(".removefile").click(function (e) {
    var this1 = $(this);
    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);
                    this1.closest("li").remove();
                }
            },
            error: function () {
                alert("Something went wrong, please try again.");
            }
        });
    }
    return false;
});

Answer 4

Try like this.

$(".removefile").click(function(e) {
    e.preventDefault();
    var this = $(this);
    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;
});

Hope this helps

Answer 5

try changing:

$(this).closest("li").remove();

to

$(this).parent().remove();