Javascript – jQuery get parent jQuery Object of clicked element

javascriptjquery

My HTML contains many objects like this:

<div class="class">
  <div class="disconnect_btn">Click here</div>
  <input type="hidden" name="ID" value="12"/>
</div>

I have a function that binds another function to the button element. Like this:

$('.disconnect_btn').bind('click',function(e){
    disconnectFunction(e);
});

What I want to do ist to get first the Div where the button is, I tried to using e.parents('.class') Method, but this always returns error like object has no method…
My second target is to extract the value attribute from the hidden input field in parents Div.

function disconnectFunction(e){
    var parent = e.parents('.class'));  //returns error
    var ID = parent.find('input:hidden[name=ID]').attr('value');
    console.log( ID );
}

I also tried this and $(this) selectors, but somehow I got stucked now, maybe there is an easy solution that I can't find.

Best Solution

You passing events as argument instead pass DOM.

you can pass it from event by doing it as below,

$('.disconnect_btn').on('click',function(e){
    disconnectFunction(e.target);
});

and in disconnectFunction you can use it as below.

function disconnectFunction(e){
    var parent = $(e).parents('.class'));  //returns error
             ---^^^^^-----
    var ID = parent.find('input:hidden[name=ID]').attr('value');
    console.log( ID );
}
Related Question