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

問題$(this)はクリックされた要素ではありません。

ここでセレクターをキャッシュします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

このようにしてみてください。

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

お役に立てれば

Answer 5

変更してみてください:

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

に

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