CODEWITHSUNDEEP
javascriptjqueryhtml
letsplay14me
letsplay14me

Reputation: 59

How to hide a div that doesn't have an ID

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: enter image description 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.

Upvotes: 1

Views: 884

Answers (10)

Nitesh Saxena
Nitesh Saxena

Reputation: 199

Your div contains the tables which have a ID. So you can use

$('#yourTableIDHere').parent().hide();

This code will hide your div.

Upvotes: 0

user2969135
user2969135

Reputation: 53

Divs can have more than one class . . .

<div class="h111">

changed to

<div class="h111 hideDiv">

CSS

.hideDiv {display: none;}

then use javascript to show it when you want it to be shown :)

Upvotes: 0

jfriend00
jfriend00

Reputation: 707218

I am not a fan of coding by position (e.g. the 3rd or 4th element) because relatively minor changes to the markup such as just adding a new div for spacing can break code that relies on specific hard-coded positions.

If you want something that won't break when there are changes to the markup that might change the relative position of items, then you have to look for more specific content that you want to hide. There are many different ways to do this depending upon what you know about the content and what is the best marker to indicate that you have the right div.

Here's one way that looks for unique identifiers in the content you want to hide, then goes up to the proper parent to hide that content:

$("#RoleListTB").closet(".h1r1").hide();
$("#AccessProfileListTB").closest(".h111").hide();

Upvotes: 1

DasBaconfist
DasBaconfist

Reputation: 604

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/

Upvotes: 0

Abhitalks
Abhitalks

Reputation: 28387

If you are sure that their positions are fixed and that won't change, then you could use nth-child selector.

Something like this:

$("#view").children("div:nth-child(3)").children("div:nth-child(2)").hide();
$("#view").children("div:nth-child(4)").children("div:nth-child(1)").hide();

Or, just:

$("#view > div:nth-child(3) > div:nth-child(2)").hide();
$("#view > div:nth-child(4) > div:nth-child(1)").hide();

Alternatively, using .eq:

$("#view").children("div").eq(2).children("div").eq(1).hide();
$("#view").children("div").eq(3).children("div").eq(0).hide();

Note: .eq is zero-based.

Upvotes: 0

Mr. Alien
Mr. Alien

Reputation: 157314

As I see that those elements are sub child of an element with an id of #view so you can make use of nth- selectors or you can use jQuery :eq()

$("#view > div:nth-of-type(3) > div:nth-of-type(2), 
   #view > div:nth-of-type(4) > div:nth-of-type(1)").hide()

Or using CSS (Recommended)

#view > div:nth-of-type(3) > div:nth-of-type(2), 
#view > div:nth-of-type(4) > div:nth-of-type(1) {
    display: none;
}

Here, the first selector i.e #view > div:nth-of-type(3) > div:nth-of-type(2) selects a third div element which is a direct child to an element having an id of #view and further it selects a direct div element which is a second child of that type

Second selector i.e #view > div:nth-of-type(4) > div:nth-of-type(1) selects fourth direct div child element to an element having an id of #view and further, it selects first direct child div

Upvotes: 2

Sunil Hari
Sunil Hari

Reputation: 1776

You can use the :eq selector to select an element at a particular index.

Assume the parent div has an id parent it had child div's having the class sub.

so if you want to hide the second child element 

$("#parent .sub:eq(1)").hide();

since the child ordering starts with `0' index

Upvotes: 0

Mritunjay
Mritunjay

Reputation: 25882

This worked for me If there is no other sibling with same class name.

HTML

<div>
    <div class="child"></div>
</div>
<div id="parent">
    <div class="child">

    </div>
</div>
<button onclick="hideDivs()">Hide</button>

Javascript

function hideDivs() {
    var parentDiv = document.getElementById('parent');
    var childDivs = parentDiv.getElementsByClassName('child');
    for (var i = 0; i < childDivs.length; i++) {
        childDivs[i].style.display = "none";
    };
}

Upvotes: 1

Evgeniy
Evgeniy

Reputation: 2921

You can use :gt Jquery selector to search by index:

$( ".some:gt(0)" );

0 - is first .some

Upvotes: 0

davidcondrey
davidcondrey

Reputation: 35963

You could easily do this by using a CSS pseudo-selector in your query.

$('#view').find('div.h1r1:nth-of-type(2)')

or you could just be more specific

.h111+.h1r1

Upvotes: 0

Related Questions