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

Добрый день всем.
Как добавить активный класс родителю 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>