Hide a specific Div which have no class with Jquery

Question

I want to hide the specific div(Example 2) but it has no class or id so i am unable to apply jquery on that specific div(Example 2)...Please guide me how can hide that div with jquery.

Here is my div structure:

<div class="purhist-desc-col">
  <h5>Heading Sample</h5>
  <div class="purchase-price"></div>
  <div>Example 1</div>
  <div class="booking-hide-on-wholeday">00:00 Check-out 00:00</div>
  <div>Example 2</div>
  <div>Example 3</div>
</div>

score 1 · Answer 1 · answered Mar 16 '18 at 11:07

1

You can use DOM relationship and target the desired element using its siblings.

$('.booking-hide-on-wholeday').next().hide()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="purhist-desc-col">
  <h5>Heading Sample</h5>
  <div class="purchase-price"></div>
  <div>Example 1</div>
  <div class="booking-hide-on-wholeday">00:00 Check-out 00:00</div>
  <div>Example 2</div>
</div>

answered Mar 16 '18 at 11:07

Satpal

132,252
13
159
168

No need to use `.next` - you can use the CSS next-sibling selector in the jquery selector like this: `$('.booking-hide-on-wholeday + div')` – Scoots Mar 16 '18 at 11:18

Athul Nath · Answer 2 · 2018-03-16T11:20:07.580

1

You can achieve this by + (next) selector.

$(document).ready(function(e) {
      $('.booking-hide-on-wholeday + div').hide();
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="purhist-desc-col">
<h5>Heading Sample</h5>
<div class="purchase-price"></div>
<div>Example 1</div>
<div class="booking-hide-on-wholeday">00:00 Check-out 00:00</div>
<div>Example 2</div>
</div>

edited Mar 16 '18 at 11:20

answered Mar 16 '18 at 11:08

Athul Nath

2,536
1
15
27

1

What does that do? How does it answer the question? Don't just blurt out code. Explain yourself! https://stackoverflow.com/help/how-to-answer – Rob Mar 16 '18 at 11:13

Temani Afif · Accepted Answer · 2018-03-16T11:28:18.593

1

And why jQuery if we can do it easily with CSS :

.purhist-desc-col>div:nth-child(5) {
  display: none;
}
/* OR
booking-hide-on-wholeday + div {
  display: none;
}
*/

<div class="purhist-desc-col">
  <h5>Heading Sample</h5>
  <div class="purchase-price"></div>
  <div>Example 1</div>
  <div class="booking-hide-on-wholeday">00:00 Check-out 00:00</div>
  <div>Example 2</div>
  <div>Example 3</div>
</div>

edited Mar 16 '18 at 11:28

answered Mar 16 '18 at 11:10

Temani Afif

245,468
26
309
415

and if example is the second last child of the main div....how can i do this with css ? – MA-2016 Mar 16 '18 at 11:12
@ma123456 i added more example ;) you can use nth-child – Temani Afif Mar 16 '18 at 11:13
Thanks alot...u saved my time – MA-2016 Mar 16 '18 at 11:21

score 0 · Answer 4 · answered Mar 16 '18 at 11:08

You could select that div with .purhist-desc-col div:last-of-type since you need to target the last div inside that container so the jQuery code would be

$('.purhist-desc-col div:last-of-type').hide()

and in vanillaJS

document.querySelector('.purhist-desc-col div:last-of-type').style.display = 'none'

score 0 · Answer 5 · answered Mar 16 '18 at 11:09

0

For this, you have to write a lineer jquery code for it.

$('div.booking-hide-on-wholeday').next('div').hide();

That will solve your question.

Thanks

answered Mar 16 '18 at 11:09

SaurabhLP

3,619
9
40
70

Hide a specific Div which have no class with Jquery

5 Answers5