Tips for accessing the ID, Name and Class of a specific DIV element with the class "Extreme" upon clicking a button

Question

Tips for accessing the ID, Name and Class of a specific DIV element with the class "Extreme" upon clicking a button

Need help finding the ID of the outermost parent div

<div class="panel" id="Kudapanel"> //Top-level Div
    <div class="Kudapanel1" id="Kudapanel1">
    </div>
    <div>
        <div>
           <input type="button" id="yo"> //Deeply nested element
         </div>
    </div>
</div>

Consider the following scenarios:

If the top-level div has a specific classname, how can you retrieve the ID of that div?
If the top-level div doesn't have the specified classname, how can you find the ID of its immediate parent div?

I attempted the following:

$("#yo").click(function(){
 alert($(this).closest('div').attr('id')); 
});

Please avoid using parent().parent().parent(), as the position of the outermost div may vary in different contexts.

javascript jquery html css

Answer 1

Answer №1

One way to tackle this issue is by utilizing the class selector:

$("#yo").click(function(){
   alert($(this).closest('div.panel').attr('id')); 
});

If the required class is not present, we would need to examine the parent HTML structure where it is situated in order to provide a solution.

UPDATE

In case the necessary class is undefined, an alternative approach is to use a different tag; instead of div, consider using section for the higher-level parent element.

<section id="Kudapanel"> //Extreme Div
    <div class="Kudapanel1" id="Kudapanel1">
    </div>
    <div>
        <div>
           <input type="button" id="yo"> //Deeply nested
         </div>
    </div>
</section> 


$("#yo").click(function(){
   alert($(this).closest('section').attr('id')); 
});

Answer 2

One way to tackle this issue is by utilizing the class selector:

$("#yo").click(function(){
   alert($(this).closest('div.panel').attr('id')); 
});

If the required class is not present, we would need to examine the parent HTML structure where it is situated in order to provide a solution.

UPDATE

In case the necessary class is undefined, an alternative approach is to use a different tag; instead of div, consider using section for the higher-level parent element.

<section id="Kudapanel"> //Extreme Div
    <div class="Kudapanel1" id="Kudapanel1">
    </div>
    <div>
        <div>
           <input type="button" id="yo"> //Deeply nested
         </div>
    </div>
</section> 


$("#yo").click(function(){
   alert($(this).closest('section').attr('id')); 
});

Answer 3

Answer №2

If you are able to determine the level of nesting, simply follow the parent chain upward until you reach it

$('#yo').on('click', function(){
   alert($(this).parents().eq(2).prop('id'));  
});

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="panel" id="Kudapanel"> //Extreme Div
        <div class="Kudapanel1" id="Kudapanel1">
        </div>
        <div>
            <div>
               <input type="button" id="yo"> //In much nestings
             </div>
        </div>
    </div>

Alternatively, you can refer to @Mivaweb's solution if unable to determine the nesting level

Answer 4

If you are able to determine the level of nesting, simply follow the parent chain upward until you reach it

$('#yo').on('click', function(){
   alert($(this).parents().eq(2).prop('id'));  
});

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="panel" id="Kudapanel"> //Extreme Div
        <div class="Kudapanel1" id="Kudapanel1">
        </div>
        <div>
            <div>
               <input type="button" id="yo"> //In much nestings
             </div>
        </div>
    </div>

Alternatively, you can refer to @Mivaweb's solution if unable to determine the nesting level

Tips for accessing the ID, Name and Class of a specific DIV element with the class "Extreme" upon clicking a button

Answer №1

Answer №2

Similar questions

Secure communication and client-server API key protection

Tips for optimizing node_module file size

What is the formula for finding the distance from the top-left corner of an HTML element to the top-left corner of the window?

Error: React-Redux/Jest Invariant Violation - The "store" could not be located

Verify if input is selected using jQuery

What is the issue with this asynchronous function?

Creating messages from an array using vanilla JavaScript or jQuery

Receiving an empty string from Chrome FileReader when dealing with large files (300MB or more)

Update the SQL database by transferring star ratings from a JSP file

The Next.js dynamic route in production is displaying a 403 error instead of the expected 404. What might be causing this issue?

The XML data is valid, however the responseXML property in the XMLHttpRequest response is null

Error encountered during Jest snapshot testing: Attempting to destructure a non-iterable object which is invalid

Bootstrap requires Visual Studio Code live-server plugin to function properly

The clear fix HTML code doesn't seem to be functioning properly in Google Chrome

Utilizing jQuery's .done() and .fail() methods to handle

The android web browser and its interactive virtual keyboard

Changing a number from 0 to 1 in a field using AngularJS (HTML5)

Serialize the selected options in a form from multiple select boxes

The REACT- Popover feature seems to be having trouble showing the data from my json file

Sass: Setting a maximum width relative to the parent element's width