CODEWITHSUNDEEP
htmljquerycss
CoreTM
CoreTM

Reputation: 305

How to remove/add class on main parent

Hi please see code below:

My goal is if I click the 1st button it will add class on main parent and if I click it again it will remove class. But if I click the other button the class on 1st main parent will remove and it will add to 2nd main parent. Can anyone help me how to accomplish that?

$(".main-btn").on("click", function() {
  $(this).closest(".main").addClass("addClass");
});
.main {
  background: yellow;
  margin-bottom: 3px;
  height: 50px;
  
}

.main.addClass {
  background: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
        <div class="main-btn">Button</div>
  <div class="main-wrapper">
  </div>
    <div class="main-wrapper">
  </div>
    <div class="main-wrapper">
  </div>
</div>

<div class="main">
  <div class="main-btn">Button</div>
</div>

<div class="main">
  <div class="main-btn">Button</div>
</div>

Upvotes: 0

Views: 36

Answers (1)

flyingfox
flyingfox

Reputation: 13506

We can do it via below functions:

  1. siblings() to get siblings elements and remove the addClass

  2. toggle() to switch the class of current clicked element

$(".main-btn").on("click", function() {
  $(this).closest(".main").siblings().removeClass("addClass");
  $(this).closest(".main").toggleClass("addClass");
});
.main {
  background: yellow;
  margin-bottom: 3px;
  height: 50px;
  
}

.addClass {
  background: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
        <div class="main-btn">Button</div>
  <div class="main-wrapper">
  </div>
    <div class="main-wrapper">
  </div>
    <div class="main-wrapper">
  </div>
</div>

<div class="main">
  <div class="main-btn">Button</div>
</div>

<div class="main">
  <div class="main-btn">Button</div>
</div>

Upvotes: 1

Related Questions