Me he topado con un problema que no he podido solucionar.
Sucede que tengo 2 divs que contienen 2 "estrellitas" entonces una de ella se encuentra oculta y la otra visible. Tengo estos elementos:
<div class="star">
<i class="fa fa-star-o" aria-hidden="true" id="unsaved" onclick="SaveAndHide()"></i>
</div>
<div class="star">
<i class="fa fa-star-o" aria-hidden="true" id="unsaved" onclick="SaveAndHide()"></i>
</div>
function SaveAndHide() {
document.getElementById("unsaved").style.display = "none";
}
De modo que al presionar sobre una se "oculte" únicamente el que estoy presionando, ese código que tengo ahora, funciona pero solo me desaparece el primer "unsaved" que se encuentra.
He encontrado esta solución:
onclick="this.parentNode.style.display = 'none'"
Pero eso involucra ponerlo dentro de la etiqueta y la verdad la quiero separada, o sea en mi propio archivo .js, lo cual no he logrado adaptar.