Making plus and minus counter buttons, jQuery

Question

There are two counters, for adult and for child. And I build up something like below.

$(document).ready(function(){
    var n = 0;
    var adultCounter = ".counter-adult";
    var childCounter = ".counter-child";

    $(adultCounter).val(n);
    $(childCounter).val(n);

    $(".plus-adult").on("click", function(){
        $(adultCounter).val(++n);
    })
    $(".minus-adult").on("click", function(){
        if (n > 0) {
            $(adultCounter).val(--n);
        }
    })



    $(".plus-child").on("click", function(){
        $(childCounter).val(++n);
    })
    $(".minus-child").on("click", function(){
        if (n > 0) {
            $(childCounter).val(--n);
        }
    })

    if ($(childCounter).val(n) > 0) {$(".minus-child").removeClass("de-active-counter")}
    
});

.person-bar-wrap .person-count {
    position: relative;
    width: 300px;
    display: flex;
    align-items: center;
    border-left: 1px solid #dcdde1;
    cursor: pointer;
}
.person-bar-wrap .person-count .hidden-filter {
    z-index: 999;
    position: absolute;
    width: 301px;
    top: 75px;
    border: 1px solid #dcdde1;
    left: -1px;
    background-color: #fff;
    cursor: default;
}
.person-bar-wrap .person-count .hidden-filter
.hidden-filter-header {
    padding: 20px 20px 20px 20px;
}
person-bar-wrap .person-count .hidden-filter
.hidden-filter-context {
    display: flex;
    border-top: 1px solid #dcdde1;
    align-items: center;
    padding: 10px 20px;

}
.person-bar-wrap .person-count .hidden-filter
.hidden-filter-context p.person-t {
    flex: 1;
    display: flex;
    justify-content: flex-start;
}
.person-bar-wrap .person-count .hidden-filter
.hidden-filter-context .minus, .counter, .plus {
    display: flex;
    justify-content: center;
}
.person-bar-wrap .person-count .hidden-filter
.hidden-filter-context input.counter {
    width: 24px;
    margin: 0 10px;
    border-width:0px;
    border:none;
    box-shadow: none;
    padding-left: 5px;
}
.person-bar-wrap .person-count .hidden-filter
.hidden-filter-context .minus, .plus {
    background-color: #995d64;
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 3px;
    align-items: center;
    text-align: center !important;
    margin: auto;
}
.person-bar-wrap .person-count .hidden-filter
.hidden-filter-context .de-active-counter {
    background-color: #dcdde1 !important;    
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="person-bar-wrap">
  <div class="person-count">
      <div class="hidden-filter">
          <div class="hidden-filter-context">
              <p class="person-t">Adult</p>
              <span class="minus-adult minus">-</span>
              <input class="counter counter-adult" type="" name="" value="">
              <span class="plus-adult plus">+</span>
          </div>
          <div class="hidden-filter-context">
              <p class="person-t">Child</p>
              <span class="minus-child minus de-active-counter">-</span>
              <input class="counter counter-child" type="" name="" value="">
              <span class="plus-child plus">+</span>
          </div>
      </div>
  </div>
</div>

Both counter is working. Minus and Plus, but I am trying to addClass("de-active-counter") if counter == 0 and remove the class if > 0 but that part is not quite worked out. removeClass() is not working. I thought it s problem that how I build the counter function... if it's, then how should I make it?

Answer 1

You need to convert the value to an integer to while checking > 0.

$(document).ready(function() {
  var n = 0;
  var adultCounter = ".counter-adult";
  var childCounter = ".counter-child";

  $(adultCounter).val(n);
  $(childCounter).val(n);

  $(".plus-adult").on("click", function() {
    $(adultCounter).val(++n);
    if (parseInt($(adultCounter).val()) > 0) {
      $(".minus-adult").removeClass("de-active-counter")
    }
  })
  $(".minus-adult").on("click", function() {
    if (n > 0) {
      $(adultCounter).val(--n);
    }
    if (parseInt($(adultCounter).val()) == 0) {
      $(".minus-adult").addClass("de-active-counter")
    } else {
      $(".minus-adult").removeClass("de-active-counter")
    }
  })



  $(".plus-child").on("click", function() {
    $(childCounter).val(++n);
    if (parseInt($(childCounter).val()) > 0) {
      $(".minus-child").removeClass("de-active-counter")
    }
  })
  $(".minus-child").on("click", function() {
    if (n > 0) {
      $(childCounter).val(--n);
    }
    if (parseInt($(childCounter).val()) == 0) {
      $(".minus-child").addClass("de-active-counter")
    } else {
      $(".minus-child").removeClass("de-active-counter")
    }
  })

});

.person-bar-wrap .person-count {
  position: relative;
  width: 300px;
  display: flex;
  align-items: center;
  border-left: 1px solid #dcdde1;
  cursor: pointer;
}

.person-bar-wrap .person-count .hidden-filter {
  z-index: 999;
  position: absolute;
  width: 301px;
  top: 75px;
  border: 1px solid #dcdde1;
  left: -1px;
  background-color: #fff;
  cursor: default;
}

.person-bar-wrap .person-count .hidden-filter .hidden-filter-header {
  padding: 20px 20px 20px 20px;
}

person-bar-wrap .person-count .hidden-filter .hidden-filter-context {
  display: flex;
  border-top: 1px solid #dcdde1;
  align-items: center;
  padding: 10px 20px;
}

.person-bar-wrap .person-count .hidden-filter .hidden-filter-context p.person-t {
  flex: 1;
  display: flex;
  justify-content: flex-start;
}

.person-bar-wrap .person-count .hidden-filter .hidden-filter-context .minus,
.counter,
.plus {
  display: flex;
  justify-content: center;
}

.person-bar-wrap .person-count .hidden-filter .hidden-filter-context input.counter {
  width: 24px;
  margin: 0 10px;
  border-width: 0px;
  border: none;
  box-shadow: none;
  padding-left: 5px;
}

.person-bar-wrap .person-count .hidden-filter .hidden-filter-context .minus,
.plus {
  background-color: #995d64;
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 3px;
  align-items: center;
  text-align: center !important;
  margin: auto;
}

.person-bar-wrap .person-count .hidden-filter .hidden-filter-context .de-active-counter {
  background-color: #dcdde1 !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="person-bar-wrap">
  <div class="person-count">
    <div class="hidden-filter">
      <div class="hidden-filter-context">
        <p class="person-t">Adult</p>
        <span class="minus-adult minus de-active-counter">-</span>
        <input class="counter counter-adult" type="" name="" value="">
        <span class="plus-adult plus">+</span>
      </div>
      <div class="hidden-filter-context">
        <p class="person-t">Child</p>
        <span class="minus-child minus de-active-counter">-</span>
        <input class="counter counter-child" type="" name="" value="">
        <span class="plus-child plus">+</span>
      </div>
    </div>
  </div>
</div>