Конфликт с вложенными div и js

Здравствуйте! Извините за вопрос, но я в CSS полный ноль. Есть страница с div и js. Задача js — скрывать изображение при клике. У меня никак не получается сделать так, чтобы они размещались горизонтально, вплотную друг к другу и чтобы при этом работал скрипт. Если убрать class="hide-on-click", то они будут горизонтально, но с интервалом между друг другом и js конечно же перестает работать. Если первый класс hide переименовать в hide-on-click, то при клике будут исчезать все картинки в нем, а нужно по отдельности.

HTML:

1. <div class="hide">
2.   <div class="hide-on-click"><img width="350px" src="../image.png"></div>
3.   <div class="hide-on-click"><img width="350px" src="../image.png"></div>
4.   <div class="hide-on-click"><img width="350px" src="../image.png"></div>
5.   <div class="hide-on-click"><img width="350px" src="../image.png"></div>
6. </div>
7.  

Код (Javascript):

1. <script>
2. (function () {
3.     var elements = document.getElementsByClassName('hide-on-click');
4.     for (var i = 0; i < elements.length; i++) {
5.         elements[i].addEventListener('click', function () {
6.             this.style.display = 'none';
7.         });
8.     }
9. })();
10. </script>

 

Решение:

Код (CSS):

1. <style>
2. .hide-on-click {
3.   background:lightgreen;
4.   width:350px;
5.   height:50px;
6.   display: inline-block;
7.   margin:0px;
8. }
9. </style>