How can I target the outer parent of the element I target?

Question

I'm trying to contact the div with the class of 'container' - But only the div that holds the element I hit.

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="new_flip.css">
    <title></title>
</head>

<body>

    <div class="wrapper">

        <div class="flip_container container">
            <div class="side_a item1">
                <h1>Header</h1>
            </div>
            <div class="side_b">
                <h1>Flip</h1>
                <a href="#" class="btn">SEE MORE</a>
            </div>
        </div>

        <div class="flip_container container">
            <div class="side_a item2">
                <h1>Header</h1>
            </div>
            <div class="side_b">
                <h1>Flip</h1>
                <a href="#" class="btn">SEE MORE</a>
            </div>
        </div>

        <div class="flip_container container">
            <div class="side_a item3">
                <h1>Header</h1>
            </div>
            <div class="side_b">
                <h1>Flip</h1>
                <a href="#" class="btn">SEE MORE</a>
            </div>
        </div>

        <div class="flip_container container">
            <div class="side_a item4">
                <h1>Header</h1>
            </div>
            <div class="side_b">
                <h1>Flip</h1>
                <a href="#" class="btn">SEE MORE</a>
            </div>
        </div>

        <div class="flip_container container">
            <div class="side_a item5">
                <h1>Header</h1>
            </div>
            <div class="side_b">
                <h1>Flip</h1>
                <a href="#" class="btn">SEE MORE</a>
            </div>
        </div>

        <div class="flip_container container">
            <div class="side_a item6">
                <h1>Header</h1>
            </div>
            <div class="side_b">
                <h1>Flip</h1>
                <a href="#" class="btn">SEE MORE</a>
            </div>
        </div>

        <div class="flip_container container">
            <div class="side_a item7">
                <h1>MyHeading</h1>
            </div>
            <div class="side_b">
                <h1>Flip</h1>
                <a href="#" class="btn">SEE MORE 5</a>
            </div>
        </div>
    </div>
<script src="target.js"></script>
</body>

</html>

let side_a_collection = document.querySelectorAll('.side_a'); //array / NodeList
let side_b_collection = document.querySelectorAll('.side_b'); //array / NodeList
let btns = document.querySelectorAll('.btn'); //array / NodeList

let headings = document.querySelectorAll('h1'); //array / NodeList

let container = document.querySelectorAll('.container'); //array / NodeList




side_b_collection.forEach((sideb) => {
    sideb.addEventListener('mouseover', () => {
        sideb.style.backgroundColor = 'orange';

    });

    sideb.addEventListener('mouseleave', () => {
        sideb.style.backgroundColor = '';

    });
});

btns.forEach((btn) => {
    btn.addEventListener('click', (e) => {
        if (e.target.tagName === 'A') {
            if (e.target.textContent == 'SEE MORE') {
                let button = e.target;
                let parentDiv = e.target.parentElement;
                parentDiv.classList.toggle('hide');
            }
        }

    });
});


headings.forEach((header) => {
    if (header.textContent.toLowerCase() == 'myheading') {
        header.textContent = 'New';
    }
});

Answer 1 · 2018-02-02T19:14:34Z

February 2, 2018 7:14pm

It looks like the "container" div is the second ancestor, so you should be able to use: "e.target.parentElement.parentElement".

Welcome to the Treehouse Community

Looking to learn something new?

Kristian Woods

Kristian Woods

How can I target the outer parent of the element I target?

1 Answer

Steven Parker

Steven Parker

Kristian Woods

Kristian Woods