Добавить div по клику по элементу

Question

Есть 6 div. 1 показывается, остальные с классом dn = display: none Нужно, чтобы при клике на кнопку, классы dn удалялись по очереди. При 1-ом клике у 2 дива, при 2-ом у 3-го дива. Как это можно реализовать?

Answer 1

const button = document.querySelector('.all');
const buttonFR = document.querySelector('.first-remove');

const elements = [...document.querySelectorAll('.dn')];

// Удалем все блоки
button.addEventListener('click', (e) => {
  e.preventDefault();
  elements.forEach(node => node.remove());

  elements.length = 0;
});

//Удаляем по элементно
elements.forEach(node => {
  node.addEventListener('click', () => node.remove());
});

// Удаляем первый
buttonFR.addEventListener('click', (e) => {
  e.preventDefault();
  // Если не пустой массив
  if (!!elements.length) {
    elements[0].remove();

    elements.shift();
  }
});

.dn {
  padding: 5px;
  cursor: pointer;
}

.dn:hover {
  background: lightgrey;
}

.first-remove,
.all {
  padding: 10px;
  background: lightgrey;
  border: 1px solid green;
  text-align: center;
  cursor: pointer;
}

.first-remove:hover,
.all:hover {
  background: grey;
}

<div class="first-remove">Remove First</div>
<div class="container">
  <div class="dn">1</div>
  <div class="dn">2</div>
  <div class="dn">3</div>
  <div class="dn">4</div>
  <div class="dn">5</div>
</div>
<div class="all">Remove All</div>

БЛОГ НА HUSL

Добавить div по клику по элементу

Ответы (1 шт):