Удалить только конкретный элемент, если у остальных такие же классы

Question

Несколько элементов имеют общий класс, как при нажатии на конкретный элемент удалить только его родителя
Пишу трекер для добавления задач.
Добавляю новый пустой инпут с кнопкой при нажатии на кнопку "добавить", затем при нажатии на кнопку с классом remove-task, мне нужно удалить конкретно эту форму с инпутом

const buttonAddTask = document.querySelector('.add');
const entryField = document.querySelector('.entry-field');
const tasks = document.querySelector('.task');

buttonAddTask.addEventListener('click', (event) => {
  event.preventDefault();

  if(entryField.value !== '') {
    tasks.insertAdjacentHTML("beforeend",
      `<form class='task-wrapper'> 
                 <input class='entry-field'>
                 <button type="button" onclick='deleteTask()' class='remove-task'></button>
              </form>`);
  }
})
const removeButton = document.getElementsByClassName("remove-task");

function deleteTask() {
  removeButton.parentElement.remove();
}

<form class='task-wrapper'>
  <input class='entry-field'>
  <button type="button" onclick='deleteTask()' class='remove-task'></button>
</form>

Answer 1

Т.к. на странице может существовать больше одного элемента с классом remove-task, то можно использовать подход: делегирование событий.
Это когда click ловится не по самому элементу, а по контейнеру, который выше по иерархии, в данном случае слушатель вешается на document, но можно и сузить область слушателя повесив слушатель на родительский контейнер для всех форм, например если бы родитель всех форм имел класс forms-parent, например, то вместо document.addEventListener нужно было бы написать document.querySelector('.forms-parent').addEventListener.

Существует и другой подход, когда для каждого элемента с классом remove-task создается свой слушатель. Делается это, например в цикле, но в данном случае я не использую этот подход.

document.addEventListener("click", event => {
  //объект event хранит информацию о событии
  //св-во target хранит ссылку на объект события
  //(элемент, на котором событие сработало)
  //console.log(event.target);

  const removeButton = event.target.closest('.remove-task');

  if (removeButton) {//если мы нажали на элемент с классом remove-task
    //то можно "выпасть до родительской формы:"
    let form_task_wrap = removeButton.closest('form.task-wrapper');

    if (form_task_wrap) {//если элемент  найден
      form_task_wrap.remove();
    }
  }

});

БЛОГ НА HUSL

Удалить только конкретный элемент, если у остальных такие же классы

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