javascript - Remove closest li after ajax success - Stack Overflow

admin管理员组

文章数量:1307837

i have a div that list all the uploaded files

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

and this is the code to delete the selected file on pressing the .removefile class element

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

the code is working fine but what i want is to delete the parent li on ajax success which is not working.. help?

i have a div that list all the uploaded files

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

and this is the code to delete the selected file on pressing the .removefile class element

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

the code is working fine but what i want is to delete the parent li on ajax success which is not working.. help?

• javascript
• jquery
• ajax

Share Improve this question Follow asked Oct 1, 2013 at 11:12 Wasif KhalilWasif Khalil 2,24799 gold badges3535 silver badges6060 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 6

The problem you have is that $(this) in your success handler is not equal to the element which was clicked on. Try 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;
});

Try it like,

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

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

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

try changing:

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

to

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

本文标签： javascriptRemove closest li after ajax successStack Overflow