Удалить колонку JS

Question

Есть HTML код с колонками

<div class="column-header">Новые задачи
                        <div class="delete">X</div>
                    </div>
                    <div data-notes>
                        <div class="note" draggable="true" note-id="1">Задача 1</div>
                    </div>
                    <p class="column-footer">
                        <span action-addNote class="action">+ Добавить Задачу</span>
                    </p>
                </div>

                <div class="column" draggable="true" column-id="2">
                    <div class="column-header">В работе
                        <div class="delete">X</div>
                    </div>
                    <div data-notes>
                        <div class="note" draggable="true" note-id="2">Задача 2</div>
                    </div>
                    <p class="column-footer">
                        <span action-addNote class="action">+ Добавить Задачу</span>
                    </p>
                </div>

и при нажатии на "Х" нужно удалить всю колонку

document.querySelector('.delete').addEventListener('click', function(event) {
    let sureDelete = confirm('Удалить?')
    const columnDelete = document.querySelector('.column')
    if (sureDelete) {
        columnDelete.remove()
    }
})

Вот код JS, но он срабатывает только для первой колонки, для всех остальных нет как исправить?

document.querySelector('.delete').addEventListener('click', function(event) {
  let sureDelete = confirm('Удалить?')
  const columnDelete = document.querySelector('.column')
  if (sureDelete) {
    columnDelete.remove()
  }
})

<div class="column-header">Новые задачи
  <div class="delete">X</div>
</div>
<div data-notes>
  <div class="note" draggable="true" note-id="1">Задача 1</div>
</div>
<p class="column-footer">
  <span action-addNote class="action">+ Добавить Задачу</span>
</p>
</div>

<div class="column" draggable="true" column-id="2">
  <div class="column-header">В работе
    <div class="delete">X</div>
  </div>
  <div data-notes>
    <div class="note" draggable="true" note-id="2">Задача 2</div>
  </div>
  <p class="column-footer">
    <span action-addNote class="action">+ Добавить Задачу</span>
  </p>
</div>

Answer 1

document.querySelectorAll('.delete').forEach(el => el.addEventListener('click', function(event) {
  let sureDelete = confirm('Удалить?');
  if (sureDelete) {
    const columnDelete = this.closest('.column');
    columnDelete.remove();
  }
}));

<div class="column" draggable="true" column-id="1">
  <div class="column-header">Новые задачи
    <div class="delete">X</div>
  </div>
  <div data-notes>
    <div class="note" draggable="true" note-id="1">Задача 1</div>
  </div>
  <p class="column-footer">
    <span action-addNote class="action">+ Добавить Задачу</span>
  </p>
</div>

<div class="column" draggable="true" column-id="2">
  <div class="column-header">В работе
    <div class="delete">X</div>
  </div>
  <div data-notes>
    <div class="note" draggable="true" note-id="2">Задача 2</div>
  </div>
  <p class="column-footer">
    <span action-addNote class="action">+ Добавить Задачу</span>
  </p>
</div>

БЛОГ НА HUSL

Удалить колонку JS

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