jquery show/hide when class changes

Question

I have two buttons, but I only want the second one to show if the first one has a certain class (which will change when the user clicks on it).

This is what I've tried. I don't get any errors, but the show/hide doesn't work. The second button is supposed to show when the first one has the class btn-success and must be hidden otherwise.

$(document).ready(function(){
  if($(".save_ans").length && (".btn-success").length){
    $(".submit_ans").show();
  }else{
   $(".submit_ans").hide();
  }
   }); 

jsfiddle example: https://jsfiddle.net/btc6rg9d/

Answer 1

You can use hasClass to check if save_ans has btn-success class depending on this hide/show your next element.

Demo Code :

$(".save_ans").hasClass('btn-success') ? $(".submit_ans").show() :
  $(".submit_ans").hide()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<a class='btn save_ans btn-warning' href="#">Save answer</a> <br> <br>

<a class='btn  submit_ans' href="#">Submit Answers</a> <br>