CODEWITHSUNDEEP
javascripthtmljquerycss
clover
clover

Reputation: 346

how to remove elements of a certain class that matches with both the id AND class of its parent?

I have implemented a function that adds the class active upon click of any of the buttons from 1-5

$('#live-chat').on('click', '.circle', function(){
if ($(this)[0]['class']!=='circle active') { $(this).addClass("active") }

Now as you can see the active class is on button 2, showing that it's selected. However I would like to remove the class active from 2 for the particular question_id the user is on

<div class='container' id='" + item.question_id + "'>
<div class='progress required' id='progress' surveyType='Individual'></div>
<div class='progress-container' id='" + item.question + "' name='number_scoring'>
<div class='circle' id='" + item.question_id + "' value='1'>1</div>
<div class='circle active' id='" + item.question_id + "' value='2'>2</div>
<div class='circle' id='" + item.question_id + "' value='3'>3</div>
<div class='circle' id='" + item.question_id + "' value='4'>4</div>
<div class='circle' id='" + item.question_id + "' value='5'>5</div>
</div></div></div></div></div>"

so to do this, I need to target 2 things ie 1) targeting class='container' 2) with id that corresponds to the current id the user is on, then only proceed to remove the class active from that particular id. What I have now is this that isn't quite right as it's throwing a syntax error. I'm new to jQuery, hoping someone could help. Thanks

$(`# ${scoring_question_id} .container`).removeClass("active");

Upvotes: 1

Views: 49

Answers (2)

Swati
Swati

Reputation: 28522

You can use siblings().removeClass("active") to remove active class from other divs and then use toggleClass("active") to add/remove active class from the one which is clicked.Also , you cannot have same ids for mutliple elements so use data-* attribute or class.

Demo Code :

$('#live-chat').on('click', '.circle', function() {
  $(this).siblings().removeClass("active") //remove active class from siblings
  $(this).toggleClass("active") //add or remove from one which is clicked
})
.active {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="live-chat">
  Question 1 :
  <div class='container' id='1'>
    <div class='progress required' surveyType='Individual'></div>
    <div class='progress-container' id='" + item.question + "' name='number_scoring'>
      <div class='circle' data-id='1' value='1'>1</div>
      <div class='circle active' data-id='1' value='2'>2</div>
      <div class='circle' data-id='1' value='3'>3</div>
      <div class='circle' data-id='1' value='4'>4</div>
      <div class='circle' data-id='1' value='5'>5</div>
    </div>
  </div>
  Questio 2 :
  <div class='container' id='2'>
    <div class='progress required'  surveyType='Individual'></div>
    <div class='progress-container' id='" + item.question + "' name='number_scoring'>
      <div class='circle' data-id='2' value='1'>1</div>
      <div class='circle active' data-id='2' value='2'>2</div>
      <div class='circle' data-id='2' value='3'>3</div>
      <div class='circle' data-id='2' value='4'>4</div>
      <div class='circle' data-id='2' value='5'>5</div>
    </div>
  </div>
</div>

Upvotes: 0

Gutelaunetyp
Gutelaunetyp

Reputation: 1882

it should be:

$(`#${scoring_question_id}.container`).removeClass("active");

So without spaces between.

If you have an HTML element with id and class, for instance like this:

<div class="world" id="hello"></div>

Then it would be:

$('#hello.world');

If you have for example an embedded element, such as this:

<div class="hello"><div id="world"></div></div>

then you could do

$('.hello #world') // with spacing

Upvotes: 1

Related Questions