Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.03.2021, 19:46
Новичок на форуме
Отправить личное сообщение для cookitee Посмотреть профиль Найти все сообщения от cookitee
 
Регистрация: 11.03.2021
Сообщений: 4

удаление 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, удалялся ее родитель. (таких одинаковых картинок много, а нужно удалить именно того родителя, где был клик на картинку внутри него).
Если вставить в рабочий код, ничего не происходит. Если же дополнительно прописать этот же код в консоли (с изменением переменных), при запуске кода удаляются даже без клика полностью все родители с картинками.
Ответить с цитированием
  #2 (permalink)  
Старый 11.03.2021, 20:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

cookitee,
строка 5 элементов нет на странице.
строка 8 в клик ничего не назначается, так как строка 3 ничего не возвращает.
скрипт ставить вниз или читать про событие DOMContentLoaded
строка 8 читать про bind или обернуть close(e) в функцию
Ответить с цитированием
  #3 (permalink)  
Старый 11.03.2021, 20:05
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

cookitee,
самое быстрое ставить клик на document, и не надо никаких циклов, читать про делегирование.
Ответить с цитированием
  #4 (permalink)  
Старый 11.03.2021, 20:17
Новичок на форуме
Отправить личное сообщение для cookitee Посмотреть профиль Найти все сообщения от cookitee
 
Регистрация: 11.03.2021
Сообщений: 4

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

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)});
});
Ответить с цитированием
  #5 (permalink)  
Старый 11.03.2021, 20:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

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));
    });

});
Ответить с цитированием
  #6 (permalink)  
Старый 11.03.2021, 20:22
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

cookitee,
или так
document.addEventListener( "click" , ({target}) => (target = target.closest(".pic")) && target.parentElement.remove());
Ответить с цитированием
  #7 (permalink)  
Старый 11.03.2021, 20:22
Новичок на форуме
Отправить личное сообщение для cookitee Посмотреть профиль Найти все сообщения от cookitee
 
Регистрация: 11.03.2021
Сообщений: 4

вообще перестало работать, даже через консоль
Ответить с цитированием
  #8 (permalink)  
Старый 11.03.2021, 20:24
Новичок на форуме
Отправить личное сообщение для cookitee Посмотреть профиль Найти все сообщения от cookitee
 
Регистрация: 11.03.2021
Сообщений: 4

вот так работает! спасибо огромное!!! А можете пожалуйста вкратце объяснить?
Ответить с цитированием
  #9 (permalink)  
Старый 11.03.2021, 20:47
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Сообщение от cookitee
А можете пожалуйста вкратце объяснить?
что?
Ответить с цитированием
  #10 (permalink)  
Старый 11.03.2021, 22:19
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,586

Сообщение от cookitee Посмотреть сообщение
вот так работает! спасибо огромное!!! А можете пожалуйста вкратце объяснить?
Попробуй сам по порядку разобрать, а что непонятно будет - подскажем.
__________________
29375, 35
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
DOM удаление дочернего элемента javaphp Events/DOM/Window 9 04.01.2016 13:38
автоматическое удаление скоупа директивы при удаление dom узла FanAizu Angular.js 0 25.08.2015 21:38
Удаление элемента DOM при неполном обновлении страницы (ВКонтакте) jsuser Events/DOM/Window 6 08.02.2013 21:28
удаление элемента dom Catherine Events/DOM/Window 0 28.10.2011 23:35
удаление DOM элемента и перезагрузка страницы Andrey2005 Общие вопросы Javascript 3 12.10.2009 23:49