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

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

<div class="hide">
  <div class="hide-on-click"><img width="350px" src="../image.png"></div>
  <div class="hide-on-click"><img width="350px" src="../image.png"></div>
  <div class="hide-on-click"><img width="350px" src="../image.png"></div>
  <div class="hide-on-click"><img width="350px" src="../image.png"></div>
</div>
<script>
(function () {
    var elements = document.getElementsByClassName('hide-on-click');
    for (var i = 0; i < elements.length; i++) {
        elements[i].addEventListener('click', function () {
            this.style.display = 'none';
        });
    }
})();
</script>

(function() { 
  var elements = document.getElementsByClassName('hide-on-click'); 
  for (var i = 0; i < elements.length; i++) { 
    elements[i].addEventListener('click', function() { 
      this.style.display = 'none'; 
    }); 
  } 
})();

<div class="hide"> 
  <div class="hide-on-click"><img width="350px" src="../image.png"></div> 
  <div class="hide-on-click"><img width="350px" src="../image.png"></div> 
  <div class="hide-on-click"><img width="350px" src="../image.png"></div> 
  <div class="hide-on-click"><img width="350px" src="../image.png"></div> 
</div>