Javascript-форум (https://javascript.ru/forum/)
-   Javascript под браузер (https://javascript.ru/forum/css-html/)
-   -   удаление DOM-элемента (https://javascript.ru/forum/css-html/82098-udalenie-dom-ehlementa.html)

cookitee 11.03.2021 19:46

удаление DOM-элемента
 
Здравствуйте!

Засела над какой-то глупой ошибкой.
Есть код:

function close(el) {
  el.parentElement.remove();
}
 
let a = document.querySelectorAll('.pic');
const arr = Array.prototype.slice.call(a);
arr.forEach(e => {
  e.addEventListener('click', close(e));
});


Нужно, чтобы при нажатии на картинку с классом pic, удалялся ее родитель. (таких одинаковых картинок много, а нужно удалить именно того родителя, где был клик на картинку внутри него).
Если вставить в рабочий код, ничего не происходит. Если же дополнительно прописать этот же код в консоли (с изменением переменных), при запуске кода удаляются даже без клика полностью все родители с картинками.

рони 11.03.2021 20:04

cookitee,
строка 5 элементов нет на странице.
строка 8 в клик ничего не назначается, так как строка 3 ничего не возвращает.
скрипт ставить вниз или читать про событие DOMContentLoaded
строка 8 читать про bind или обернуть close(e) в функцию

рони 11.03.2021 20:05

cookitee,
самое быстрое ставить клик на document, и не надо никаких циклов, читать про делегирование.

cookitee 11.03.2021 20:17

Вот если прописать так, все работает, удаляет только один нужный элемент. Но опять же, только если в консоли в браузере его прописывать и запускать. Так если просматривать просто результат написанного кода, не работает.

function close(el) {
  el.parentElement.remove();
}
 
let a = document.querySelectorAll('.pic');
const arr = Array.prototype.slice.call(a);
arr.forEach(e => {
  e.addEventListener("click", function () {close(this)});
});

рони 11.03.2021 20:19

cookitee,
document.addEventListener("DOMContentLoaded", function() {
    function close(el) {
        el.parentElement.remove();
    }

    let a = document.querySelectorAll('.pic');
    const arr = Array.prototype.slice.call(a);
    arr.forEach(e => {
        e.addEventListener('click', close.bind(null, e));
    });

});

рони 11.03.2021 20:22

cookitee,
или так
document.addEventListener( "click" , ({target}) => (target = target.closest(".pic")) && target.parentElement.remove());

cookitee 11.03.2021 20:22

вообще перестало работать, даже через консоль

cookitee 11.03.2021 20:24

вот так работает! спасибо огромное!!! А можете пожалуйста вкратце объяснить?

рони 11.03.2021 20:47

Цитата:

Сообщение от cookitee
А можете пожалуйста вкратце объяснить?

что?

Aetae 11.03.2021 22:19

Цитата:

Сообщение от cookitee (Сообщение 534630)
вот так работает! спасибо огромное!!! А можете пожалуйста вкратце объяснить?

Попробуй сам по порядку разобрать, а что непонятно будет - подскажем.


Часовой пояс GMT +3, время: 21:49.