Удалить один div по нажатию на кнопку

Question

У меня есть генератор div`ов на РНР:

echo '<div class="block">'.$result['title'].' - '.$result['price'].' рублей <br />
<img src="img/'.$result['image'].'"><br />
<button name="delete" class="delete" style="margin-bottom: 30px;">Удалить</button><br />';

и этих блоков может быть очень много. Нужно сделать так, чтобы при нажатии на кнопку delete удалялся лишь тот, на кнопку которого нажали. Я не особо силён в JS, но смог написать такой код:

document.querySelectorAll('.delete').forEach(
  b => b.addEventListener('click', 
    () => b.closest('.block').remove())
);

Вот только таким образом исчезают все блоки. Как получить нужный блок и удалить именно его? Кто может помочь?

Answer 1

По id:

echo '<div id="'
.$result['id']
.'">'
.$result['title']
.' - '
.$result['price']
.' рублей <br /><img src="img/'
.$result['image']
.'"><br /><button name="delete"'
.' onclick="document.getElementById(\''.$result['id'].'\').remove()"'
.' style="margin-bottom: 30px;">Удалить</button></div>';

Но id обязательно должен быть уникальный, можете сделать префикс, к примеру: '<div id="exmpl_'.$result['id'].'">'

А еще в своем коде вы не закрыли div

Answer 2

Вы можете использовать следующий JavaScript код в конце своего HTML:

// Блок #1
function act(event) {
    event.target.parentElement.remove();
}

// Блок #2
document.querySelectorAll('button.delete').forEach(
    button => button.addEventListener('click', act)
);

Блок #1 является функцией, которая вызывается при нажатии на кнопку. Данная функция имеет аргумент event, который содержит в себе кучу информации о произошедшем событии, в том числе и target - элемент, который был нажат (в нашем случае - кнопка). Дальше мы вызываем метод remove() у прямого родителя кнопки (в нашем случае это div).

Блок #2 регистрирует событие click для каждой кнопки с классом delete, где обработчиком события является функция act из Блока #1.

Дайте, пожалуйста, знать, если это не помогло, или я непонятно объяснил.

БЛОГ НА HUSL

Удалить один div по нажатию на кнопку

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