How to traverse dom tree on jquery chosen change event

Question

I'm using jQuery chosen for my selects and I need to do alter some fields on change. Here'es my change code which works:

j(".address").chosen().change(function(evt, value) {
    console.log(evt);
    address_id = value.selected;
});

If I log the evt variable to the console I can see it has a property called currentTarget which appears to point to the original select element which has been hidden. If I do the following:

evt.currentTarget.remove();

This removes the select from the DOM as I would expect so that shows that the object does relate to the select box. So if I try to traverse the DOM instead using that object as a starting point I just get errors. For example if I do the following:

evt.currentTarget.parents('.form-group').remove();

It just errors with the following:

Uncaught TypeError: undefined is not a function

Ideally I want to do something like this:

evt.currentTarget.parents('.form-group').next('.form-group').find('.address').val("some data")

Please don't suggest just using ID's as that's not going to work for what I am trying to build I want a generic solution that will work with classes even if there are multiple instances on the same page.

Answer 1

evt.currentTarget is a node which doesn't have the same API as a jQuery element but does have a remove method.

Wrap it up in jQuery like so j(evt.currentTarget) as jQuery seems to be j in your case.