Hide a class from other class with the same name when clicked

Question

An image is display to my webpage, all having the same class name. I try hiding a particular one with it is clicked but any time I click that particular class, all the classes are affected

I used PHP to echo the image to webpage. I have tried all I could but not working.

<a href="#"><img class="media_image" onclick="hide()" src="media/<?php echo $media?>"/></a>


<script>
function hide(){
var divs = document.getElementsByClassName("media_image");
for(var i = 0; i <= divs.length; i++){
console.log("Item: ", i);
}
}
</script>

Answer 1

You can change onclick="hide()" to onclick="hide(this)" to pass the element into the function and then the function can be changed to accept it.

function hide (element) {
    //do whatever with element
    element.style.display = "none";
}

Answer 2

you could add a second special class to every image in the webpage like :

<img class="myimg img-1">
<img class="myimg img-2">
<img class="myimg img-3">
// ect