jquery $(this).parents('.cssClassName') only finds window in IE, but works in other browsers

Question

I have the following jquery code:

 jQuery(function ($) {
    $(document).on('click', '.del', function () {
        var self = $(this);
        parent = self.parents('.transportRow');
        parent.remove();
    });
});

When i click a link with the class "del" inside a div with the class "transportRow" the div should be removed.

This is working fine in Webkit and Firefox, but not in IE

I get an error that tells me that the object does not support the property or method "remove".

When i inspect it in the debugger, parent seems to be the window, not the div element.

Does anybody know how to get this script running in IE?

Answer 1

When you use parent without var you refer to the global variable parent aka the parent property on the global ( window ) object.

In IE the window.parent property is readonly (in reality it is the property attribute [[Writable]] of the property that is set to false or not set at all).

Changing the row:

parent = self.parents('.transportRow');

to

var parent = self.parents('.transportRow');

should do the trick. Or change names.

Crockford talks about this issue and recommends using that instead of self . This advice is also applicable on parent I say.