How to hide child element under parent?

Question

css

There is such a piece of layout on the page.

<a href="#" class="earn-item__control-item earn-item__control-item-fav earn-item__control-item_favorites">
     <svg class="icon icon-star-empty"><use xlink:href="/images/icons/symbol-defs.svg#icon-star-empty"></use></svg>
</a>

js code

(function () {
    document.addEventListener("DOMContentLoaded", function (event) {

        var favItems = [].slice.call(document.querySelectorAll(".earn-item__control-item-fav"));

        favItems.forEach(function (elem) {
            elem.addEventListener("click", function (event) {
                var target = event.target;
                event.preventDefault();
                console.log(target);
            });
        });
    });
}());

I want to do the following when clicking on the star, I want to get the parent element a tag a with classes earn-item__control-item earn-item__control-item-fav earn-item__control-item_favorites
But getting the svg tag or use

how to make it show only when clicking on the star tag a.

Answer 1

use parentNode or parentElement

elem.addEventListener("click", function (event) {
   var target = event.target;
   event.preventDefault();
   console.log(target.parentNode); // <-- выводим в консоль предка с помощью parentNode
});

https://www.w3schools.com/jsref/prop_node_parentel...

Answer 2

You already have the a tag in the closure:

(function () {
    document.addEventListener("DOMContentLoaded", function (event) {

        var favItems = [].slice.call(document.querySelectorAll(".earn-item__control-item-fav"));

        favItems.forEach(function (elem) {
            elem.addEventListener("click", function (event) {
                console.log(elem);
            });
        });
    });
}());