Как удалить блок при клике на кнопку?

Question

Как удалить блок при клике на кнопку?

Рейтинг: 0Ответов: 1Опубликовано: 02.05.2023

При клике на кнопку "Клик" добавляются блоки, если добавлено больше 2 блоков и на один из них нажать кнопку закрыть, то закрываются все блоки. Подскажите пожалуйста как закрыть только тот блок на который кликнули?

const profileAdded = document.querySelectorAll('.added');
const profileClose = document.querySelectorAll('.added-block button');

profileAdded.forEach(added => {
  added.addEventListener('click', function() {
    let block = this.nextElementSibling.querySelector('.added-block:not(._active)')
    if (block) block.classList.add('_active');
  });
  profileClose.forEach(close => {
      close.addEventListener("click", function (e) {
        let addedSubitem = added.nextElementSibling.querySelectorAll('.added-block._active')
        if (addedSubitem) {
          addedSubitem.forEach(item => {
            item.classList.remove('_active');
          });
        }
      });
    });
});

.added-block { display: none; }
.added-block._active { display: block; }

<div>
  <button class="added">КЛИК</button>
  <div class="menu__list">
    <div>
      <div class="menu__item">LOREM</div>
    </div>
    <div class="added-block">
      <div class="menu__item ">LOREM</div>
      <button>X</button>
    </div>
    <div class="added-block">
      <div class="menu__item ">LOREM</div>
      <button>X</button>
    </div>
    <div class="added-block">
      <div class="menu__item ">LOREM</div>
      <button>X</button>
    </div>
  </div>
</div>

<br>
<br>

<div>
  <button class="added">КЛИК</button>
  <div class="menu__list">
    <div>
      <div class="menu__item">LOREM</div>
    </div>
    <div class="added-block">
      <div class="menu__item ">LOREM</div>
      <button>X</button>
    </div>
    <div class="added-block">
      <div class="menu__item ">LOREM</div>
      <button>X</button>
    </div>
    <div class="added-block">
      <div class="menu__item ">LOREM</div>
      <button>X</button>
    </div>
  </div>
</div>

javascript

Источник: Stack Overflow на русском

Answer 1

▲ 1Принят

В вашем коде было прописано условие удаления всех элементов, кстати хочу заметить что querySelectorAll всегда возвращает массив (даже пустой) и условие if (addedSubitem){} всегда будет истинным. Я закоментировал тот код который пораждал ошибочное поведение и добавил 2 строки взамен. Если Вы посмотрите на функцию обрабочик то заметите такую конструкцию в параметрах {target: element} — таким образом я event.target переименовываю в element одновременно извлекая его из event путем деструктуризации.

const item = element.closest('.added-block._active'); // находим родительский блок
if (item) item.classList.remove('_active'); // убираем у родителя класс

const profileAdded = document.querySelectorAll('.added');
const profileClose = document.querySelectorAll('.added-block button');

profileAdded.forEach(added => {
  added.addEventListener('click', function() {
    let block = this.nextElementSibling.querySelector('.added-block:not(._active)')
    if (block) block.classList.add('_active');
  });
  profileClose.forEach(close => {
      close.addEventListener("click", function ({target: element}) {
        /*
        let addedSubitem = added.nextElementSibling.querySelectorAll('.added-block._active')
        if (addedSubitem) {
          addedSubitem.forEach(item => {
            item.classList.remove('_active');
          });
        }
        */
        const item = element.closest('.added-block._active');
        if (item) item.classList.remove('_active');
        
      });
    });
});

.added-block { display: none; }
.added-block._active { display: block; }

<div>
  <button class="added">КЛИК</button>
  <div class="menu__list">
    <div>
      <div class="menu__item">LOREM1</div>
    </div>
    <div class="added-block">
      <div class="menu__item ">LOREM2</div>
      <button>X</button>
    </div>
    <div class="added-block">
      <div class="menu__item ">LOREM3</div>
      <button>X</button>
    </div>
    <div class="added-block">
      <div class="menu__item ">LOREM4</div>
      <button>X</button>
    </div>
  </div>
</div>

<br>
<br>

<div>
  <button class="added">КЛИК</button>
  <div class="menu__list">
    <div>
      <div class="menu__item">LOREM1</div>
    </div>
    <div class="added-block">
      <div class="menu__item ">LOREM2</div>
      <button>X</button>
    </div>
    <div class="added-block">
      <div class="menu__item ">LOREM3</div>
      <button>X</button>
    </div>
    <div class="added-block">
      <div class="menu__item ">LOREM4</div>
      <button>X</button>
    </div>
  </div>
</div>

Как удалить блок при клике на кнопку?

Ответы