CODEWITHSUNDEEP
javascriptjquery
Lacrifilm
Lacrifilm

Reputation: 283

Hide all divs that contain an element inside

I have three divs with same class, inside theses divs I have others divs with two different class:

<div class="TotalResults">
<div class="resultPassed"></div>
</div>

<div class="TotalResults">
<div class="resultPassed"></div>
</div>

<div class="TotalResults">
<div class="resultError"></div>
</div>

I would like to hide all divs that have class="resultPassed" inside him. how can I do this with javascript or jquery?

Upvotes: 0

Views: 96

Answers (3)

MPawlak
MPawlak

Reputation: 715

In Jquery -

$('.resultPassed').parent().hide() will change the display to none.

In pure JS - 

var arr = document.getElementsByClassName("resultPassed"); 

for (var i = 0; i < arr.length; i++) {
    arr[i].parentNode.style.display = "none";
}

Upvotes: 0

Ehsan
Ehsan

Reputation: 12959

Try it :

$("div").has(".resultPassed").hide();

Final code :

<!DOCTYPE html>
<html>
<head>
    
</head>
<body> 
     <div class="TotalResults">
         <div class="resultPassed">I am resultPassed</div>
    </div>
    
    <div class="TotalResults">
        <div class="resultPassed">I am resultPassed</div>
    </div>
    
    <div class="TotalResults">
        <div class="resultError">I am not resultPassed</div>
    </div>
    
    <button class="btn">Hide</button>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>        
    $(document).ready(function(){
        
        $(".btn").on("click",function(){
            $("div").has(".resultPassed").hide(1000);
        })
        
    })
    </script>
</body>
</html>

Upvotes: 1

Nalin Aggarwal
Nalin Aggarwal

Reputation: 888

This should work :

$('.resultPassed').parent().hide()

Upvotes: 4

Related Questions