I'm working within a really rigid framework (NetSuite) and there's a small section that I have direct control over which is the h3 and p text below. The structure is similar to this:

<div class="grandparent">
    <h1>Title Text</h1>
    <div class="otherstuff">Some text</div>
    <div class="parent">
        <h3>Text I have control over</h3>
        <p>More text I have control over</p>
    </div>
</div>

I want to hide the title text and the contents of '.otherstuff' for this page. There are multiple pages similar to this so I'm looking for a clean way of getting it done.

I've tried giving the h3 tag a class, then the following:

$('h3.myclass').parent().closest('h1').css('display','none);

and variations of that but without any luck. I've looked into the .parentUntil() function but I run into the same problem. I have no problem grabbing ancestor elements but run into trouble when trying to grab elements of those ancestors.

Can anyone help me out?

EDIT: Thank you everyone for your time and effort in answering my question. I really appreciate it!

I'm working within a really rigid framework (NetSuite) and there's a small section that I have direct control over which is the h3 and p text below. The structure is similar to this:

<div class="grandparent">
    <h1>Title Text</h1>
    <div class="otherstuff">Some text</div>
    <div class="parent">
        <h3>Text I have control over</h3>
        <p>More text I have control over</p>
    </div>
</div>

I want to hide the title text and the contents of '.otherstuff' for this page. There are multiple pages similar to this so I'm looking for a clean way of getting it done.

I've tried giving the h3 tag a class, then the following:

$('h3.myclass').parent().closest('h1').css('display','none);

and variations of that but without any luck. I've looked into the .parentUntil() function but I run into the same problem. I have no problem grabbing ancestor elements but run into trouble when trying to grab elements of those ancestors.

Can anyone help me out?

EDIT: Thank you everyone for your time and effort in answering my question. I really appreciate it!

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Jun 26, 2015 at 22:54 Stephen Whitmore asked Jun 26, 2015 at 21:33 Stephen WhitmoreStephen Whitmore 95311 gold badge99 silver badges2424 bronze badges 4

• 1 Where is .myclass element? – Satpal Commented Jun 26, 2015 at 21:36
• 1 Use .hide() instead of .css('display', 'none'). – Barmar Commented Jun 26, 2015 at 21:39
• @Sarwic "have direct control over which is the h3 and p text below" Does requirement allow selection of h3 parent element .parent ? , or only h3 element ? – guest271314 Commented Jun 26, 2015 at 21:50
• Sorry that wasn't that clear. The '.myclass' was for the h3 tag. @guest271314, I can select everything but I can only directly change h3 and p text through the admin panel – Stephen Whitmore Commented Jun 26, 2015 at 22:45

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 9

1. Use closest() to traverse up to the grandparent
2. Use find() to select the desired elements
3. You can use hide() in place of css('display', 'none') as they are equivalent

var grandparent = $('.myclass').closest('.grandparent');
grandparent.find('h1, .otherstuff').hide();

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="grandparent">
  <h1>Title Text</h1>
  <div class="otherstuff">Some text</div>
  <div class="parent">
    <h3 class="myclass">Text I have control over</h3>
    <p>More text I have control over</p>
  </div>
</div>

I can think of two selectors that might work assuming you put .myclass back in.

$('.myclass').closest('.grandparent').find('h1').css('display','none');

or

$('.myclass').parent().siblings('h1').css('display','none');

have direct control over which is the h3

Try utilizing .parent() , .siblings()

$("h3").parent().siblings().hide(); // `$(".parent").siblings().hide();` ?

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js">

</script>
<div class="grandparent">
    <h1>Title Text</h1>
    <div class="otherstuff">Some text</div>
    <div class="parent">
        <h3>Text I have control over</h3>
        <p>More text I have control over</p>
    </div>
</div>

You may use:

$('.myclass').closest('.grandparent').find('>h1,>.otherstuff').hide();

> is for direct descendant element.

closest() selects ancestors, what you want is siblings().

So:

$('.your_h3_class').parent().siblings('h1')

will return an array of h1 siblings of the parent div, and in your case the first item of that array is your h1.

And you can iterate through those and hide them (in case there is ever more than one)

If the title is always immediately before the div with the "otherstuff" class, then you could use this:

$('.otherstuff').prev('h1').css('display', 'none');

Documentation here: https://api.jquery./prev/