Solo necesito un máximo de 3 elementos para que aparezcan en la pantalla en todo momento y si se elimina uno de ellos, el siguiente en la línea ocupa su lugar y así sucesivamente hasta que no haya elementos.

Aquí está el fragmento de código:

 <div class="mob-keys-container" id="mob-keys-container"> <img class="answerIcon mobIcon active" draggable="true" id="answer_1_mob" src="./images/5.1.png" alt="key"> <img class="answerIcon mobIcon active" draggable="true" id="answer_2_mob" src="./images/5.2.png" alt="key"> <img class="answerIcon mobIcon active" draggable="true" id="answer_3_mob" src="./images/5.3.png" alt="key"> <img class="answerIcon mobIcon active" draggable="true" id="answer_4_mob" src="./images/5.4.png" alt="key"> <img class="answerIcon mobIcon active" draggable="true" id="answer_5_mob" src="./images/5.5.png" alt="key"> <img class="answerIcon mobIcon active" draggable="true" id="answer_6_mob" src="./images/5.6.png" alt="key"> </div>

Y aquí está el mejor código que funciona:

 $('.info-mob').on('click', () => { $('#mob-keys-container').toggle(); $('#mob-keys-container').children().slice(0, 3).show(); });

.info-mob abre una pestaña que contiene todos los elementos y, mientras está abierta, debe haber un máximo de 3 elementos. Todo funciona bien si cierro y vuelvo a abrir esa pestaña, pero necesito que sea más dinámico y siempre tenga un máximo de 3 elementos, incluso si agrego uno con una función diferente.