How to hide a div that does not have an identifier

advertisements

I need to write a piece of code (I am thinking of JavaScript/jQuery) that would hide the two divs highlighted. The problem is that they do not have IDs and they belong to classes but are not the only objects in those classes. So I cannot hide the classes, because that will hide more things that I want. The "parent" div has an ID.

Please find the code here:

Is there any way I can reference the divs that I want to hide by the order number from the parent? Any other solution would be greatly appreciated.


You could use the table's ids to identify the container.

$("#RoleListTB").closest(".hlrl").hide();

closest() is looking up the DOM to the next matching parent, so you can start at your table as shown.

i've made a fiddle for this:

<a href="#" id="toggle" >show/hide</a>
<div>
    <div class="hlrl">
        <span id="RoleListTB">
            RoleList Table
        </span>
    </div>
</div>

$("#toggle").click(function(){
    $("#RoleListTB").closest(".hlrl").toggle();
});

http://jsfiddle.net/NGVQ3/