If this div has this class, hide another element

Question

I want to hide the button ONLY if a specific div (.variable-item-3) has the class "selected".

The class "selected" is added when the li is clicked.

if($('.variable-item-3').hasClass('selected')) {
    $('.button').hide();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
    <li class="variable-item-1">Option 1</li>
    <li class="variable-item-2">Option 2</li>
    <li class="variable-item-3 selected">Option 3</li>
</ul>

<button type="submit" class="button">Add to cart</button>

Possible duplicate of [Event trigger on a class change](https://stackoverflow.com/questions/10612024/event-trigger-on-a-class-change) — JasonB, Jun 20 '19 at 01:47
Not sure why we need `selected` here when the button has to be hidden on every click on `li`, as it says that `selected` will be added on clicking an `li`. — Ejaz, Jun 20 '19 at 01:51
@PaulNikonowicz It can't be onclick because if the user selects another option, the button would stay hidden. — Stanley Tan, Jun 20 '19 at 01:53

score 3 · Answer 1 · answered Jun 20 '19 at 02:09

You need to perform the test after you change the selected class. You're just running it once when the page is loaded, it won't automatically run again when the class changes.

You can use the .toggle() function with a boolean argument to make the visibility depend on a test.

$("li").click(function() {
  $("li").removeClass("selected");
  $(this).addClass("selected");
  $(".button").toggle(!$('.variable-item-3').hasClass('selected'));
});

li.selected {
  background-color: yellow;
}

.button {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
    <li class="variable-item-1">Option 1</li>
    <li class="variable-item-2">Option 2</li>
    <li class="variable-item-3 selected">Option 3</li>
</ul>

<button type="submit" class="button">Add to cart</button>

score 0 · Answer 2 · answered Jun 20 '19 at 02:21

Since you are already using javascript to add the .selected class, it's probably easier to use the javascript solutions suggested in the other answers. However, if you prefer using CSS (I personally prefer using CSS to Javascript whenever possible) and if the div you care about comes before the button you care about then you can actually just use CSS.

.variable-item-3.selected ~ .button {
  display: none;
}

This assumes that .button and .selected are siblings. It gets more complicated if the two aren't siblings but it's still possible as long as an ancestor of .button is a sibling of .selected. In that case it would look something like this:

.variable-item-3.selected ~ div .button {
  display: none;
}

If the HTML isn't structured so that either of these will work, then you'll need to use one of the other solutions that does it with javascript.

I wished this worked but unfortunately it didn't for me. The button and div aren't siblings. — Stanley Tan, Jun 20 '19 at 03:08

If this div has this class, hide another element

2 Answers2