-4

Please see code below 

<div class="parent-div">
    <div class="child-div">This is a child</div>
    <div class="child-div">This is a child</div>
    <div class="child-div">This is a child</div>
    
    <div class="notif-div">Notification Div</div>
</div>

Can anyone help me regarding this matter, My goal is to find on the parent div (".parent-div") if has a child class (".child-div"). If my parent class finds that has a subclass the notif-div class will hide and if not the notif-div will still show. Using jQuery

CBroe
  • 91,630
  • 14
  • 92
  • 150
CoreTM
  • 195
  • 7
  • 1
    What have you tried so far and why wasn't it working? We can help you debug your code or prepare a concept for it but we will not write it for you. – ciekals11 Sep 13 '21 at 09:28
  • 1
    You can check your [answer here](https://stackoverflow.com/questions/10539162/using-jquery-to-see-if-a-div-has-a-child-with-a-certain-class). – Zain Asif Sep 13 '21 at 09:29
  • @ciekals11 hi thanks for replaying I've tried this so far and still not working but I'm still searching for fix. $(document).ready(function(){ var messageNotif = document.querySelector(".message-notif"); var wrapper = $(this).closest(".menu-notif-cc"); if(wrapper.find(".menu-notif-c._notif-c").hasClass(".menu-notif-c._notif-c")) { messageNotif.css("display", "none"); } else { messageNotif.css("display", "initial"); alert("///"); } }); By the way thanks for the answer :) – CoreTM Sep 13 '21 at 09:37
  • Please [edit] your question with what you've tried, so that it is formatted correctly. – freedomn-m Sep 13 '21 at 09:47
  • 1
    Note `.hasClass` takes a class name, not a selector - `$(..).hasClass("class")` not `$("..").hasClass(".class")` – freedomn-m Sep 13 '21 at 09:48
  • @freedomn-m thanks for the info. Currently, I'm working on it – CoreTM Sep 13 '21 at 09:54

5 Answers5

3

for this you dont need jquery. can be done only with css and the help of :first-child.

.parent-div{
  background-color: lightgray;
}

.notif-div {
  display: none;
}

.notif-div:first-child {
    display: block;
}
<p>3 childs</p>
<div class="parent-div">
    <div class="child-div">This is a child</div>
    <div class="child-div">This is a child</div>
    <div class="child-div">This is a child</div>
    
    <div class="notif-div">Notification Div</div>
</div>

<p>no childs</p>
<div class="parent-div">
    <div class="notif-div">Notification Div2</div>
</div>
JamesDK
  • 86
  • 3
1

Just wanted to note that depending on the security needs of your website, it may be undesirable that the end-user can still see the notification div when they 'view the source HTML' or inspect the element, especially for sensitive data. See the image below.

Notification div still in the DOM after CSS approach

CSS does not remove elements from the DOM, it only affects them visually. To properly remove the notification div from the DOM, you would have to use Javascript, with jQuery being used in the two scenarios below.

Hide notification div if parent has .child-div

if($('.parent-div').find('.child-div').length !== 0)
   $('.notif-div').remove();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent-div">
    <div class="child-div">This is a child</div>
    <div class="child-div">This is a child</div>
    <div class="child-div">This is a child</div> 
    <div class="notif-div">Notification Div</div>
</div>

Show notification div if parent has .child-div

if($('.parent-div').find('.child-div').length !== 0)
   $('.parent-div').append($('<div class="notif-div">Notification Div</div>'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent-div">
    <div class="child-div">This is a child</div>
    <div class="child-div">This is a child</div>
    <div class="child-div">This is a child</div> 
</div>
Nathan
  • 313
  • 2
  • 4
1

$( document ).ready(function() {
var size = $('.parent-div').find('.child-div').length;
if (size !== 0)
    $(".notif-div").hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="parent-div">
    <div class="child-div">This is a child</div>
    <div class="child-div">This is a child</div>
    <div class="child-div">This is a child</div>
    
    <div class="notif-div">Notification Div</div>
</div>
Ganpat Thakor
  • 63
  • 4
1

We can use nth-of-type to select the notif div.

.notif-div{display: none;}
.parent-div .notif-div:nth-of-type(1) {display: block;}
<div class="parent-div">
    <div class="child-div">This is a child</div>
    <div class="child-div">This is a child</div>
    <div class="child-div">This is a child</div>
    
    <div class="notif-div">Notification Div</div>
</div>

Here's another div without the child-div s

.notif-div{display: none;}
    .parent-div .notif-div:nth-of-type(1) {display: block;}
    <div class="parent-div">
        <div class="notif-div">Notification Div</div>
    </div>

This will resolve your problem.

Viira
  • 3,805
  • 3
  • 16
  • 39
1

$(document).ready(function(){    
if ($('.parent-div').children().hasClass('child-div')){

    $('.parent-div .notif-div').css('display', 'none')

}else{

    $('.parent-div .notif-div').css('display', 'block')

}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent-div">
        <div class="child-div">This is a child</div>
        <div class="child-div">This is a child</div>
        <div class="child-div">This is a child</div>
        
        <div class="notif-div">Notification Div</div>
    </div>
sandeepnegi
  • 123
  • 13