Add an multiple Element each Button clicked and remove element from the list of button-CodePudding

I have a 5 buttons and each button click will add each element. My concern is when I click back to previous button I click. I need a previous element only will be add and other will be remove.. example: if click 5. it shows 5 add(element) if then I click back to click3 it show only 3 elements and remove element[5] and element[4].

let clickItem;
for (let c = 1; c < 6; c  ) {
  clickItem = document.getElementsByClassName('click-item-'   c);
  $(clickItem).on('click', function() {
    $('.child-item').not(this).removeClass('active');
    $(this).addClass('active')
    $(".add-item").slice(0, c).removeClass("inactive");
  })
}

<style>.active {
  display: block;
  background-color: blue;
}

.inactive {
  display: none;
}

</style>

<button >Click 1</button>
<button >Click 2</button>
<button >Click 3</button>
<button >Click 4</button>
<button >Click 5</button>

<div >Add 1</div>
<div >Add 2</div>
<div >Add 3</div>
<div >Add 4</div>
<div >Add 5</div>


<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

CodePudding user response：

You can add a function that put the inactive class to all items and then, re-run the function.

let clickItem;
for (let c = 1; c < 6; c  ) {
  clickItem = document.getElementsByClassName('click-item-'   c);
  $(clickItem).on('click', function() {
    resetContext()
    $('.child-item').not(this).removeClass('active');
    $(this).addClass('active')
    $(".add-item").slice(0, c).removeClass("inactive");
  })
}

const resetContext = () => {
  const elements = document.getElementsByClassName("add-item");
  for (const elem of elements){
    elem.classList.remove('active');
    elem.classList.add('inactive');
  }
}

<style>.active {
  display: block;
  background-color: blue;
}

.inactive {
  display: none;
}

</style>

<button >Click 1</button>
<button >Click 2</button>
<button >Click 3</button>
<button >Click 4</button>
<button >Click 5</button>

<div >Add 1</div>
<div >Add 2</div>
<div >Add 3</div>
<div >Add 4</div>
<div >Add 5</div>


<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

CodePudding user response：

Just make things easier. Add data attribute on your HTML. Based upon data attribute add and remove your class.

Example:

$('.child-item').on("click", function(e) {
  var dt = $(this).data("btn");
  $("div").removeClass('active'); 
  $('div').filter(function() {
    return $(this).data('div') == dt;
  }).removeClass('inactive').addClass('active');

});

.active {
  display: block;
  background-color: blue;
}

.inactive {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button data-btn="1" >Click 1</button>
<button data-btn="2" >Click 2</button>
<button data-btn="3" >Click 3</button>
<button data-btn="4" >Click 4</button>
<button data-btn="5" >Click 5</button>

<div data-div="1" >Add 1</div>
<div data-div="2" >Add 2</div>
<div data-div="3" >Add 3</div>
<div data-div="4" >Add 4</div>
<div data-div="5" >Add 5</div>