JQuery - Hide a parent div that always has the same class IF it contains another div with another class that repeats itself that contains 2017

user_4292691 0
Viewed 81

I have a page with multiple divs like this:

`<div class="mod-tile">
Bla bla zbing
<div>Lorem Ipsum</div>
<time class="date">Crocodile Dundee 2016</time>
<div class="date">Lorem lorena 2017</div>
</div>

<div class="mod-tile">
Bla bla zbing
<div>Lorem Ipsum</div>
<time class="date">John Humdee 2016</time>
<div class="date">Izabelle Adjani 2018</div>
</div>

<div class="mod-tile">
Bla bla zbing
<div>Lorem Ipsum</div>
<time class="date">Rabbit wabbit 2017</time>
<div class="date">Bam boom 2020</div>
</div>`

How can I hide, using JQuery, the parent "mod-tile" div if the child div with class "date" contains 2017 as text? Only the "mod-tile" div that contains that, not all other "mod-tile" divs.

My limited knowledge try:

$("div:hasClass("mod-tile"):has(div:hasClass("date"):contains("2017")).hide()")

Thank you

EDIT: So the solution for the above divs is, as mr. Paul T. said:

$(".mod-tile > div.date:contains('2017')").parent().hide();

What happens if the "date" div is nested within another div, and we still need to hide the grandparent "mod-tile"?

<div class="mod-tile">
Bla bla zbing
<div>Lorem Ipsum</div>
<div class="wabbit">
    <time class="date">Crocodile Dundee 2016</time>
    <div class="date">Lorem lorena 2017</div>
</div>
</div>

Solution for second example, based on Paul's code and using Rory's suggestions:

$(".mod-tile").has("div.date:contains('2016')").hide();

Thank you

css jquery javascript
1 Answers

You can use the > selector to the child div's having the date class within the parent, and then hide the parent: 

// Find child div.date elements that contains the data and then hide the parent.

$(".mod-tile > div.date:contains('2017')").parent().hide();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mod-tile">
    Bla bla zbing
    <div>Lorem Ipsum</div>
    <time class="date">Crocodile Dundee 2016</time>
    <div class="date">Lorem lorena 2017</div>
</div>
<br>
<div class="mod-tile">
    Bla bla zbing
    <div>Lorem Ipsum</div>
    <time class="date">John Humdee 2016</time>
    <div class="date">Izabelle Adjani 2018</div>
</div>
<br>
<div class="mod-tile">
    Bla bla zbing
    <div>Lorem Ipsum</div>
    <time class="date">Rabbit wabbit 2017</time>
    <div class="date">Bam boom 2020</div>
</div>

UPDATE:

Seeing your second example made me realize that has() could have been used with the first example too, in the same way, and not need to call the parent(). I have never used has() before, so I learned something new too!

// Find child div.date elements that contains the data to hide the parent.

$('.mod-tile').has("div.date:contains('2017')").hide();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mod-tile">
    Bla bla zbing
    <div>Lorem Ipsum</div>
    <time class="date">Crocodile Dundee 2016</time>
    <div class="date">Lorem lorena 2017</div>
</div>
<br>
<div class="mod-tile">
    Bla bla zbing
    <div>Lorem Ipsum</div>
    <time class="date">John Humdee 2016</time>
    <div class="date">Izabelle Adjani 2018</div>
</div>
<br>
<div class="mod-tile">
    Bla bla zbing
    <div>Lorem Ipsum</div>
    <time class="date">Rabbit wabbit 2017</time>
    <div class="date">Bam boom 2020</div>
</div>

user_76440180
Related