Сохранение исходного результата при клике

Question

По задумке данный скрипт должен менять цвет блока на красный, а когда кликаешь на другой блок, то цвет предыдущего блока должен сбрасываться до исходного цвета(зеленый). Как это реализовать?

document.querySelector('.main').addEventListener('click', e => {
  if (e.target.className == 'item') {
     e.target.style.background = `${e.target.dataset.color}`;  
  }
})

.main {
  display: flex;
  flex-direction: column;
}

.item{
  padding: 10px;
  background: #248a52;
  border: 1px solid #006633;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  color: white;
 
}

<div class="main">
  <div class="item" data-color="red">Блок 1</div>
  <div class="item" data-color="red">Блок 2</div>
  <div class="item" data-color="red">Блок 3</div>
  <div class="item" data-color="red">Блок 4</div>
</div>

Answer 1

document.querySelector('.main').addEventListener('click', e => {
  if (e.target.className == 'item') {
    document.querySelectorAll('.main .item').forEach(el => el.style.background = '');
    e.target.style.background = e.target.dataset.color;
  }
});

.main {
  display: flex;
  flex-direction: column;
}

.item {
  padding: 10px;
  background: #248a52;
  border: 1px solid #006633;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  color: white;
}

<div class="main">
  <div class="item" data-color="red">Блок 1</div>
  <div class="item" data-color="red">Блок 2</div>
  <div class="item" data-color="red">Блок 3</div>
  <div class="item" data-color="red">Блок 4</div>
</div>

Answer 2

addEventListener('click', e => {
  const $target = e.target.closest(`.item`);
  if (!$target) return;

  $target.closest(`.main`).querySelectorAll(`.item`).forEach($item => {
    if ($target === $item) {
      $item.style.background = `${e.target.dataset.color}`;
    } else {
      $item.style.removeProperty('background');
    }
  });
})

.main {
  display: flex;
  flex-direction: column;
}

.item {
  cursor: pointer;
  padding: 10px;
  background: #248a52;
  border: 1px solid #006633;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  color: white;
}

<div class="main">
  <div class="item" data-color="red">Первый выбор</div>
  <div class="item" data-color="red">Второй выбор</div>
  <div class="item" data-color="red">Третий выбор</div>
  <div class="item" data-color="red">Четвёрты выбор</div>
</div>
<hr>
<div class="main">
  <div class="item" data-color="red">Первый выбор</div>
  <div class="item" data-color="red">Второй выбор</div>
  <div class="item" data-color="red">Третий выбор</div>
  <div class="item" data-color="red">Четвёрты выбор</div>
</div>

БЛОГ НА HUSL

Сохранение исходного результата при клике

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