Uncaught TypeError: Cannot call method 'toLowerCase' of undefined

Question

I ran into a very vague error while doing some simple jQuery DOM manipulation.

The line that triggered the error is the following:

$(this).closest('tr').remove();

The error, as stated in the title, is:

Uncaught TypeError: Cannot call method 'toLowerCase' of undefined

in file: jquery-1.6.2.js.

I have already tried with jQuery 1.6.3 and jQuery 1.5.1, but nothing changed. I still keep getting the error.

The line above is bound to a button which, when clicked, submits an AJAX POST request, then when successful, it removes its own <tr>. I have already tried another way by doing:

$(this).parent().parent().remove() but to my surprise, this did nothing.

I'm using Chrome, in case it matters, but I get the same error in FF.

EDIT:

This is my code:

$(".remove").live('click', function(e)  {     var str = $(this).attr('id').match(/\[(.*?)\]\[(.*?)\]/);     var type = str[1];     var id = str[2];              // IF I PUT THE remove() HERE, IT WORKS.      $.ajax({         type: 'POST',         url: '/admin/ajax_remove_event_detail',         data: {type: type, id: id},         success:function(res)   {             if(res)             {                 $(this).closest('tr').remove();                 // this gives me an error             }             else             {               // error handling              }         }     });      e.preventDefault(); }); 

If I put the remove() outside of the if somewhere, it works. Why won't it work when it's inside the ajax call/if? Makes no sense to me? :(

Any help here? Thanks in advance.

Answer 1

I don't know what you expect the value of this to be in your "success" handler, but I bet it's not what you think. Save this outside the "$.ajax()" call:

var clicked = this; $.ajax(   // ...   success: function(res) {     if (res) {       $(clicked).closest('tr').remove();     }     else {       // ...     }   } );