how to hide a div if another div has a special attribute

Question

I have the following structure, what I want to achieve is that if the point class has the "black" attribute, the button does not appear. Someone who can help me please

     <div class="container" > 

         <div class="card" > 
           <div class="button" > button </div>
            <div class="colors" > 
             <div value="black" class="point"> </div>
             <div value="white" class="point"> </div>
            </div>
           </div>
         </div> 


        if ($('.point').attr("value") == "black") {
              $(".button").hide();
         }

You can search for any attribute with a query selector. In your case `.button[value="black"]`. — Christopher, Jun 11 '22 at 00:13
Does this answer your question? [Select elements by attribute in CSS](https://stackoverflow.com/questions/5324415/select-elements-by-attribute-in-css) — gre_gor, Jun 11 '22 at 00:18

score 0 · Accepted Answer · answered Jun 11 '22 at 01:39

0

Select everything with the class point which has a specific attribute (in this case value="black"). Then find the sibling of the parent div with the class .button and hide it. No need for the if statement.

$('.point[value="black"]').parent().siblings(".button").hide();

answered Jun 11 '22 at 01:39

joshnishikawa

71
1
5

And if for some strange reason I have to put the "div.point" 7 div inside, how do I do it? – Israel Ramirez Jun 11 '22 at 03:03
*"put the "div.point" 7 div"* - what's the "div.point 7 div"? – freedomn-m Jun 11 '22 at 03:31
with "parents" thanks for the great response and taking the time to help. – Israel Ramirez Jun 11 '22 at 03:32

how to hide a div if another div has a special attribute

1 Answers1