JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="grid">
      <li><img src="images/Hassum_Harrod_03_tn.jpg"></li>
      <li><img src="images/Hassum_Harrod_03_tn.jpg"></li>
      <li><img src="images/Hassum_Harrod_03_tn.jpg"></li>
      <li><img src="images/Hassum_Harrod_03_tn.jpg"></li>
    </ul>

CSS

body {
  background: #042029;
  font-family: 'Merriweather';
  color: #EAE3CB;
}

#art {
  width: 320px;
  margin: 0 auto;

}

#art h2 {
  font-family: 'Bree Serif';
  font-size: 2em;
  color: #A57706;
  margin-bottom: 0;
}

ul {
  margin: 0 auto;
  padding: 0;
}

ul li {
  list-style: none;
  display: inline-block;
  cursor: pointer;
}

ul li img {
  width: 100px;
  border: 1px solid #FCF4DC;
}

JavaScript

document.querySelector('.grid').addEventListener('click', function(e) {
  if (e.target.tagName === 'IMG') {
    var howmany = e.target.querySelectorAll('li').length;
    if (howmany > 1) {
      var removeTarget = e.target.parentNode;
      removeTarget.parentNode.removeChild(removeTarget);
    } 
  } 
}, false);