How do I hide the closest element to the element that was clicked without jQuery?

Question

I have a function that changes the src attribute of an icon when this one is clicked. I also want it to hide the closest icon of the class fave_icon . I tried the following but it's not working:

function trash(event, trashcan){
    event.stopPropagation();
    if (trashcan.getAttribute('src') == "Iconos/tacho.png")
    {
        trashcan.src = "Iconos/warning.png"; //this works ok
        var heart = trashcan.closest(".fave_icon");
        heart.style.visibility = "hidden"            
    }
}

Basically I want to hide the closest element with class fave_icon to trashcan .

On the HTML I have this several times:

<button class="accordion">
  <div>
    <img src="Iconos/heart.png" onclick="fav(event,this);" alt="Fave" class="fave_icon">
  </div>
  <div>
    <img src="Iconos/tacho.png" onclick="trash(event,this);" alt="Delete" class="delete_icon">
  </div>
</button>

Answer 1

If fave_icon is a class then you have to place dot ( . ) before the class name as part of the selector.

Change var heart = trashcan.closest("fave_icon");

To

var heart = trashcan.closest(".fave_icon");

Based on the code and HTML you have provided you can do something like the following:

 function trash(event, trashcan){ event.stopPropagation(); if (trashcan.getAttribute('src') == "Iconos/tacho.png"){ trashcan.src = "Iconos/warning.png"; //this works ok var heart = trashcan.closest('button').querySelector('.fave_icon'); heart.style.visibility = "hidden"; } } 

 <button class="accordion"> <div> <img src="Iconos/heart.png" onclick="fav(event,this);" alt="Fave" class="fave_icon"> </div> <div> <img src="Iconos/tacho.png" onclick="trash(event,this);" alt="Delete" class="delete_icon"> </div> </button> 

Answer 2

From the trash icon, you go up a level to the div, select the previousElementSibling to get the heart's div, and then go down a level to the heart image itself.

Because the element is already included in the event target, you don't need to pass this . Or, even better, if you select the trash image first, you can avoid this entirely and use explicit variable names, which are easier to understand and debug.

But inline event handlers are essentially eval inside HTML markup - they're bad practice and result in poorly factored, hard-to-manage code. Seriously consider attaching your events with JavaScript, instead, eg: https://developer.mozilla.org/en/DOM/element.addEventListener

Another problem is that button s should not have closing tags. Use a container element instead, like a div .

So, try something like this:

 document.querySelectorAll('img[src="Iconos/tacho.png"]').forEach(img => { img.onclick = () => { const heartImg = img.parentElement.previousElementSibling.children[0]; heartImg.style.visibility = 'hidden'; }; }); 

 <div class="accordion"> <div> <img src="Iconos/heart.png" alt="Fave" class="fave_icon"> </div> <div> <img src="Iconos/tacho.png" alt="Delete" class="delete_icon"> </div> </div> 

Answer 3

you can add a class to the clicked element and use the general sibling combinator if the two items are adjacent.

 document.getElementById("hide") .addEventListener("click", (event) => { event.target.classList.add('active'); }, false); 

 #hide.active~.element { visibility: hidden; } #hide { cursor: pointer; } .accordion { padding: 15px; background: lightgrey; border-bottom: 1px solid grey; } .accordion div { color: black; margin-right: 20px; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/icono/1.3.0/icono.min.css" rel="stylesheet" /> <div class="accordion"> <div class="icono-trash" id="hide"></div> <div class="element icono-heart"></div> </div>