Как спрятать дочерний элемент под родительский?

Question

[Дмитрий Тарасов]

На странице есть такой кусочек верстки.

<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

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

Я хочу сделать следующее при нажатии на звезду, я хочу получить родительский элемент тег a c классами earn-item__control-item earn-item__control-item-fav earn-item__control-item_favorites
Но получаю тег svg или use

как сделать чтобы при нажатии на звезду показывался только тег a.

Answer 1

[Степан Крапивин]

использовать parentNode или 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...

Comments

[Дмитрий Тарасов]

Степан Я понимаю, но может быть так, что человек нажмет на тег use или svg, а мне надо именно на тег а. Чтобы не делать всякие условия типа
if(target === svg) targert.parentNode;
if(target === use) targert.parentNode.parentNode;

[Степан Крапивин]

Дмитрий Тарасов, если у вас не подразумевается другая структура глубже svg > use, то почему бы и нет?
К тому же можно повесить обработчик 'click' не на всё подряд, а только на svg и уже в нём можно с точностью определять что parentNode это и есть тег a

[Степан Крапивин]

Дмитрий Тарасов, а если неизвестно сколько будет вложенных элементов, то только в цикле искать пока parentNode не окажется нужным тегом.

Answer 2

[Роман Дубинин]

Тег a у вас уже есть в замыкании:

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