Why doesn't target.closest select element by class?

Question

JavaScript

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

I'm trying to manipulate the picture by clicking on the button, but event.target.closest('.news-card-pic') returns null to the console .
Tell me why the search by class does not work in this case?

Answer 1

Obviously, because among the ancestors of target there is no element with the specified class. Look carefully where the target is, and where is what you are trying to get.