Hide an element in DOM when specific class included
Question
I need to hide a div from DOM when specific class included in middle of the html code. Please take a look at this example.
<body>
<div class="first-group">
<h1>Hello world</h1>
</div>
<div class="wrapper">
<div class="second-group">
<div class="main">
<div class="small">
<span class="text-block">Hello mars</span>
</div>
</div>
</div>
</div>
</body>
I tried to achieve this with jQuery .closest() but no luck.
$( ".text-block" ).closest( ".first-group" ).css( "color", "red" );
Any solution?
5 answers
solution1
1 2018-05-31 05:35:37
if($(".second-group span").hasClass("text-block")) { $('.first-group').css('display', "none"); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div class="first-group"> <h1>Hello world</h1> </div> <div class="wrapper"> <div class="second-group"> <div class="main"> <div class="small"> <span class="text-block">Hello mars</span> </div> </div> </div> </div> </body>
solution2
1 2018-05-31 05:40:33
Simply if the length of .text-block inside the wrapper is greater then 0 then simply make .first-group display: none .
if($( ".wrapper" ).find( ".text-block" ).length > 0){ $('.first-group').css( "display", "none" ) }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="first-group"> <h1>Hello world</h1> </div> <div class="wrapper"> <div class="second-group"> <div class="main"> <div class="small"> <span class="text-block">Hello mars</span> </div> </div> </div> </div>
If you have multiple .first-group and .wrapper then you can simply loop the wrapper and find its parent and previous element of that parent.
$( ".wrapper" ).find( ".text-block" ).each(function() { $(this).parents('.wrapper').prev('.first-group').css( "display", "none" ); })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="first-group"> <h1>Hello world</h1> </div> <div class="wrapper"> <div class="second-group"> <div class="main"> <div class="small"> <span class="text-block">Hello mars</span> </div> </div> </div> </div> <div class="first-group"> <h1>Hello world</h1> </div> <div class="wrapper"> <div class="second-group"> <div class="main"> <div class="small"> <span class="text-block">Hello mars</span> </div> </div> </div> </div>
solution3
1 2018-05-31 05:44:15
Your basic problem is that closest() looks for an ancestor. .text-block is not a descendant of .first-group . Use prev() to find the previous sibling of the containing block.
In response to your comment prevAll works if there are intermediate siblings.I've added a few empty divs to the example to demonstrate.I need to check some fringe cases.
To get this a bit more robust I've used prevUntil to limit the sibling selection combined with prev to find the actual element of interest.
$( ".text-block" ).closest( ".wrapper" ).prevUntil(".first-group").prev().hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <!-- This Won't Show --> <div class="first-group"> <h1>Hello world</h1> </div> <div></div><div></div> <div class="wrapper"> <div class="second-group"> <div class="main"> <div class="small"> <span class="text-block">Hello mars</span> </div> </div> </div> </div> <!--This Will Show--> <div class="first-group"> <h1>Hello world, Again</h1> </div> <div></div><div></div> <div class="wrapper"> <div class="second-group"> <div class="main"> <div class="small"> <span class="not-text-block">Hello jupiter</span> </div> </div> </div> </div> <!-- This Won't Show --> <div class="first-group"> <h1>Hello world</h1> </div> <div></div><div></div> <div class="wrapper"> <div class="second-group"> <div class="main"> <div class="small"> <span class="text-block">Hello mars</span> </div> </div> </div> </div> <!--This Will Show--> <div class="first-group"> <h1>Hello world, Again</h1> </div> <div></div><div></div> <div class="wrapper"> <div class="second-group"> <div class="main"> <div class="small"> <span class="not-text-block">Hello jupiter</span> </div> </div> </div> </div> </body>
NOTE this will break if you change your HTML structure.
solution4
1 2018-05-31 05:45:18
The use of closest will only look for its ancestor, while .first-group is outside the .wrapper div.
In the below code, we are finding the ancestor of the element and then use prev() to get previous element with class .first-group
$(this).closest("div.wrapper").prev(".first-group").css('display', 'none');
See if it works.
solution5
1 2018-05-31 06:07:12
You can try with parents() and siblings() like the following:
$(".text-block").parents('.wrapper').siblings('.first-group').css( "color", "red" );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div class="first-group"> <h1>Hello world</h1> </div> <div class="wrapper"> <div class="second-group"> <div class="main"> <div class="small"> <span class="text-block">Hello mars</span> </div> </div> </div> </div> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.