all. I have html layout like this:

<div class="row" id="1">
/*Other code has nothing to do with <div class="form-group col-lg-1">*/

   <div class="form-group col-lg-1">
         <input type="button" class="btn btn-default" onclick="updateLine()" value="Update">
   </div> 
</div>

I want to obtain the div's ID, in this case, which is 1.

This is what I did.

function updateLine() {
  alert(this.parent().parent().attr("id"));
}

However, it failed, then I check

alert(this);

it returns to me the window object.

So the question is , how could I get the id's value, which is 1.

Thanks.

all. I have html layout like this:

<div class="row" id="1">
/*Other code has nothing to do with <div class="form-group col-lg-1">*/

   <div class="form-group col-lg-1">
         <input type="button" class="btn btn-default" onclick="updateLine()" value="Update">
   </div> 
</div>

I want to obtain the div's ID, in this case, which is 1.

This is what I did.

function updateLine() {
  alert(this.parent().parent().attr("id"));
}

However, it failed, then I check

alert(this);

it returns to me the window object.

So the question is , how could I get the id's value, which is 1.

Thanks.

• javascript
• jquery
• html
• dom

• 1 How this works is extensively explained in the the MDN documentation. There you will find that when a function is called as foo(), this refers to the global object. But even if this referred to the correct object, it would refer to as DOM element, not a jQuery object. I remend to read about the basics of event handling with and without jQuery: learn.jquery./events/event-basics, quirksmode/js/introevents.html. – Felix Kling Commented Apr 11, 2014 at 21:32
• I notice also when use this within arrow function it refers to window – Mahmoud Magdy Commented Dec 2, 2023 at 3:56

5 Answers 5

You need to pass this to the function as follows

<input type="button" class="btn btn-default" onclick="updateLine(this)" value="Update">

function updateLine(obj) {
 alert(obj);
 $(obj).closest('.row').attr('id'); // will return the id, note that numeric values like 1 are invalid
}

You do not need to pass this to the function. In an event handler this is the element clicked. However, to use .parent() etc on it you need the jQuery object for that element which is $(this)

Also, I would strongly rement using .closest instead of .parent().parent(). Something like

$(this).closest('div.row').attr('id')

Way less likely to break when you make small layout changes...

The ments about using jQuery events instead of inline javascript are also good advice.

Example:

<div class="row" id="1">
/*Other code has nothing to do with <div class="form-group col-lg-1">*/

   <div class="form-group col-lg-1">
         <input type="button" class="btn btn-default" value="Update">
   </div> 
</div>

<script type="text/javascript">
    $(function(){
        function updateLine(event){
            alert( $(this).closest('.row').attr('id') );
        }

        // If you have other buttons add a class like 'btn-update' and use that instead
        $('body').on('click', '.btn-default', updateLine);

    });
</script>

If you want to do inline event handlers, you need to pass this:

onclick="updateLine(this)"

then in js:

function updateLine(obj) {
    alert($(obj).closest('.row').attr("id"));
}

However, I'd remend removing the inline handler if possible and using jQuery to do the binding:

$('button').click(function() {
    alert($(this).closest('.row').attr("id"));
});

What you are trying do is very bad practice. It will never work.

Firs, you should not use inline javascript.

Second, you should use real jQuery code.

Below you can see a working example.

<div class="row" id="1">
    <div class="form-group col-lg-1">
        <input type="button" class="btn btn-default" value="Update" id="someID" />
    </div>
</div>

And your jQuery code should be like:

$(function () {

    $('#someID').click(function () {
        alert($(this).parents('div:eq(1)').prop('id'));
    });

});

Here is a working example: http://jsfiddle/avramcosmin/Z9snq/

A bit late but what worked for me:

$(document).on('click', '.id', function(event) {
    const elem = $(this);
})