JQuery не удаляя элементы

Question

У меня есть код в jquery, который используется для удаления предыдущего тега div и следующего .pclass.Вот мой код:

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

                    }

                    }); 
             }
         });

Когда я использую методы удаления перед вызовом функции $ .ajax, он работает нормально, но не тогда, когда я помещаю его в успех.Я проверил вывод, возвращаемый файлом сервлета.Работает нормально.Есть идеи?

Answer 1

Вы должны сохранить контекст в переменной и передать его в функцию успеха, например:

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

В качестве альтернативы, вы можете использовать $.ajax параметр контекста :

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

Answer 2

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

                    }

                    }); 
             }
         });

Answer 3

Проблема здесь, потому что контекст этого изменяется, когда выполняется обработчик успеха. Используйте трюк "что-это".

Попробуйте код ниже:

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

Answer 4

Я бы предположил, что this в обратном вызове успеха, вероятно, не относится к нажатому элементу, как это происходит вне вызова ajax.Переместите эти строки успеха в их собственную функцию, вызовите функцию из успеха и вставьте в эти строки точку останова в firebug, чтобы увидеть, что такое this.

Answer 5

Вы теряете область действия «этого», когда находитесь в функции успеха.Вы можете установить переменную $ (this) и передать ее.

Answer 6

В методе ajax.success this не указывает на ваш элемент.

Добавьте такой код

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

, а затем

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