jquery not removing the elements

I h开发者_如何学JAVAave code in jquery which is used to delete the previous div tag and a next .pclass. Heres my code:

 $(".delete").bind("click",function(){
             var c = confirm("You sure want to delete this?");
             if(c){
                /* $(this).next('.pclass').remove();
                 $(this).prev('.rurl').remove();
                 $(this).remove();*/
                 var text = $(this).prev('.rurl').text();
                 var idvalue = $(this).prev('.rurl').attr('id');
                 var id = idvalue.split("|");

                 $.ajax({
                        type: "POST",
                        url: "http://localhost:8080/cPEP_UI/Engine_rurl_delete",
                        data: "text="+text+"&eid="+id[1],
                        dataType: "json",
                        success: function(data) {
                            if(data.update == "success"){
                                $(this).next('.pclass').remove();
                                 $(this).prev('.rurl').remove();
                                 $(this).remove();
                            }
                            // $('#show').show();
                            //$('#show').html(data.update+" "+data.message).fadeOut(8000);
                        },
                    error:function(xhr,err){
                      //alert("readyState: "+xhr.readyState+"\nstatus: "+xhr.status);
                       $('#show').show();
                      // alert(xhr.responseText);
                       $('#show').html("responseText: "+xhr.responseText);

                    }

                    }); 
             }
         });

When I am using the remove methods before calling $.ajax function, it's working fine but not when I am putting it inside success. I have checked the output getting returned by the servlet file. It's working fine. Any ideas?

You must store the context in a variable and pass that to the success function, like so:

var that = $(this);
$.ajax({
    ...
    success: function(data) {
        that.remove();
    }
});

Alternatively, you can use $.ajax's context option:

$.ajax({
    ...
    context: this, // set the context for all ajax-related callbacks
    success: function(data) {
        $(this).next('.pclass').remove();
    }
});

In ajax.success method this is not pointing to your element.

Add code like that

var self = this;
var c = confirm("You sure want to delete this?");

and then

if(data.update == "success"){
    $(self).next('.pclass').remove();
    $(self).prev('.rurl').remove();
    $(self).remove();
}

You're losing scope of "this" when you're in the success function. You can set $(this) to a variable and pass the variable.

I would imagine that this inside the success callback probably doesn't refer to the clicked element as it does outside the ajax call. Move those success lines into their own function, call the function from success and pop a breakpoint in firebug on those lines to see what this is.

Issue here because the context of this changes when the success handler is executed. Use the that-this trick.

Try the code below:

 $(".delete").bind("click",function(){
     var c = confirm("You sure want to delete this?");
       //#################################
       //Capture the context of this so that it can be used in callbacks
     var that = $(this);
     if(c){
         var text = $(this).prev('.rurl').text();
         var idvalue = $(this).prev('.rurl').attr('id');
         var id = idvalue.split("|");

         $.ajax({
                    type: "POST",
                    url: "http://localhost:8080/cPEP_UI/Engine_rurl_delete",
                    data: "text="+text+"&eid="+id[1],
                    dataType: "json",
                    success: function(data) {
                        if(data.update == "success"){
                         //##########################
                         //Since the context of this was stored in that, use it. 
                         that.next('.pclass').remove();
                         that.prev('.rurl').remove();
                         that.remove();
                        }
                    },
            error:function(xhr,err){
                 $('#show').show();
                 $('#show').html("responseText: "+xhr.responseText);
            }
        }); 
  }
});

$(".delete").bind("click",function(){
             var c = confirm("You sure want to delete this?");
             if(c){
                /* $(this).next('.pclass').remove();
                 $(this).prev('.rurl').remove();
                 $(this).remove();*/


                 var myElement = $(this);


                 var text = $(this).prev('.rurl').text();
                 var idvalue = $(this).prev('.rurl').attr('id');
                 var id = idvalue.split("|");

                 $.ajax({
                        type: "POST",
                        url: "http://localhost:8080/cPEP_UI/Engine_rurl_delete",
                        data: "text="+text+"&eid="+id[1],
                        dataType: "json",
                        success: function(data) {
                            if(data.update == "success"){
                                myElement.next('.pclass').remove();
                                myElement.prev('.rurl').remove();
                                myElement.remove();

                                //$(this).next('.pclass').remove();
                                //$(this).prev('.rurl').remove();
                                //$(this).remove();
                            }
                            // $('#show').show();
                            //$('#show').html(data.update+" "+data.message).fadeOut(8000);
                        },
                    error:function(xhr,err){
                      //alert("readyState: "+xhr.readyState+"\nstatus: "+xhr.status);
                       $('#show').show();
                      // alert(xhr.responseText);
                       $('#show').html("responseText: "+xhr.responseText);

                    }

                    }); 
             }
         });