Почему target.closest не выбирает элемент по классу?

Question

[VyacheslavIny]

<div class="news-card-1 commentary-closed">
            <div class="news-card-pic"></div>
            <div class="news-card-right">
                <div class="news-card-description">
                    <h1>What is Lorem Ipsum?</h1>
                    <p>Lorem Ipsum is simply dummy text of ...</p>
                </div>
                <div class="news-card-buttons">
                    <div class="news-card-hashtag">
                        <p data-hashtag>#Art</p>
                    </div>
                    <div class="card-buttons">
                        <button type="button" class="heart" value="17"></button>
                        <button type="button" class="list"></button>
                        <button type="button" class="commentary commentary-empty"></button>
                    </div>
                </div>
            </div>
        </div>

document.addEventListener('click', openCommentary);

function openCommentary(event) {
    if (event.target.classList.contains('commentary')) {
        let picture = event.target.closest('.news-card-pic');
        console.log(picture);
    }
}

Пытаюсь по клику на кнопку произвести манипуляции с картинкой, но event.target.closest('.news-card-pic') возвращает в консоль null.
Подскажите, почему не работает поиск по классу в данном случае?

Answer 1

[0xD34F]

Очевидно, потому что среди предков target нет элемента с указанным классом. Смотрите внимательнее, где находится target, а где то, что вы пытаетесь получить.

Comments

[VyacheslavIny]

Подскажите, как в таком случае можно по клику обратиться к этому .news-card-pic, при учете, что на странице будет несколько div-ов с таким же классом?

[0xD34F]

VyacheslavIny, подняться до ближайшего общего предка, найти у него внутри нужный элемент:

target.closest('.news-card-1').querySelector('.news-card-pic')

[VyacheslavIny]

Все работает, спасибо большое :)