Как с дочерних элементов добавить активный класс родителю?
 

Добрый день всем.
Как добавить активный класс родителю parent, когда клик происходит по дочернему butt?

<div class="parent">
        <button class="butt">Активный класс нужен родителю parent</button>
    </div>

p.s. Без jQuery пожалуйсто

У каждого дочернего элемента есть ссылка на родителя

<элемент>.parentNode

https://developer.mozilla.org/ru/doc...ode/parentNode

ksa,
Но мне же все равно прийдёт сперва вытаскивать parent с document.querySelector("")? Если над этим дивом есть другие элементы кроме bodyЯ правильно понимаю?

const butt = document.querySelector(".butt")
butt.parentNode().classList.add("active")

В конце мои догадки, они верны?

Alexander3928,
parent click if targer .butt parent classList.add

рони,
У меня ситуация просто, родительский элемент по размеру дочернего. То-есть когда я навожусь я вижу дочерний элемент, а не родительский. Просто пример который я отправил в первом сообщении просто пример. А не именно моя проблема. В моей ситуации дочерний элемент по размеру родительского, поэтому я не смогу отслеживать клики по родительскому элементу. Надеюсь понятно объяснил в чем, это метод не совсем подойдёт

какие ваши доказательства?

рони,
Какие доказательства? Я могу скинуть пример который у меня, но там код слегка большой.
+ У меня в другом который не использовал в качестве примера, есть элемент works_hover у него в стилях position: absolute, поэтому когда я навожусь, я вижу не родительский элемент, а works_hover.

Вот мой пример:

<a href="#" class="parent">
           <div class="works__hover"></div>
            <img src="image" class="works__img">
      </a>

У works__hover стили такие

position: absolute
top: 0
witch: 100%
height: 100%

как это может влиять на всплытие клика до родителя?

Alexander3928,
делайте макет, минимальный и описание куда жать, что сделать.

Никакой разницы не вижу... :-?

<style type='text/css'>
.parent,
.test {
	display: inline-block;
}
.on {
	border: 2px solid red;
}
</style>
<div class="parent">
	<button class="butt">Активный класс нужен родителю parent</button>
</div>
<div class="test">
	<button>Тест</button>
</div>
<script>
document.querySelectorAll('.butt, .test').forEach(_ => {
	_.addEventListener('click', _ => {
		const o = _.target
		if (o.classList.contains('test')) {
			if (!o.classList.contains('on')) o.classList.add('on')
			return
		}
		if (!o.parentNode.classList.contains('on')) o.parentNode.classList.add('on')
		})
})
</script>

рони,

<a href="#" class="works__row-image">
        <div class="works__hover">
            <div class="works__hover-text"></div>
            <div class="works__hover-text"></div>
        </div>
        <img src="../src/IMG/worksImages/image_1.jpg" class="works__image">
    </a>

.works__row-image {
display: block;
    transition: 0.3s;
    position: relative;
    margin: 15px;
}
.works__hover {
 transition: 0.3s;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--color_8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
}

и вот как делал я

const children = document.querySelector(".works__hover")
    children.addEventListener("click", () => {
      children.parentNode.classList.toggle("active")
    });

По картинке видно что класс добовляется works__hover, а мне нужно на works__row-image ,когда я кликаю по элементу works__hover

Alexander3928,

document.addEventListener("DOMContentLoaded", function() {
            const parent = document.querySelector(".works__row-image")
            parent.addEventListener("click", function(event) {
                event.preventDefault();
                if (event.target.closest(".works__hover")) parent.classList.add("active");
            });
        });