Tengo 5 botones y cada clic de botón agregará cada elemento. Mi preocupación es cuando hago clic para volver al botón anterior en el que hago clic. Necesito que un elemento anterior solo se agregue y otro se elimine. Ejemplo: si hago clic en 5, muestra 5 agregar (elemento) si luego hago clic en volver a hacer clic en click3 , muestra solo 3 elementos y elimina el element[5] y el 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 class="child-item click-item-1">Click 1</button> <button class="child-item click-item-2">Click 2</button> <button class="child-item click-item-3">Click 3</button> <button class="child-item click-item-4">Click 4</button> <button class="child-item click-item-5">Click 5</button> <div class="add-item inactive">Add 1</div> <div class="add-item inactive">Add 2</div> <div class="add-item inactive">Add 3</div> <div class="add-item inactive">Add 4</div> <div class="add-item inactive">Add 5</div> <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>Puede agregar una función que coloque la clase inactive en todos los elementos y luego vuelva a ejecutar la función.
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 class="child-item click-item-1">Click 1</button> <button class="child-item click-item-2">Click 2</button> <button class="child-item click-item-3">Click 3</button> <button class="child-item click-item-4">Click 4</button> <button class="child-item click-item-5">Click 5</button> <div class="add-item inactive">Add 1</div> <div class="add-item inactive">Add 2</div> <div class="add-item inactive">Add 3</div> <div class="add-item inactive">Add 4</div> <div class="add-item inactive">Add 5</div> <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>