JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="grid">
    <li alt="red1" class="red" id='red'></li>
    <li id="orange"><a href="http://www.google.com"></a></li>
    <li id="silver"></li>
    <li alt="green machine" id="green"></li>
    <li id="gold"></li>
    <li id="purple"></li>
    <li id="pink" alt="pink"></li>
    <li id="blue"></li>
    <li id="black"></li>
</ul>

CSS

ul {
    margin:0px auto;
    width:700px;
    height:600px;
    position:relative;
    cursor:pointer;
    border:black;
    */
}
li {
    width:200px;
    height:200px;
    background:black;
    display:inline-block;
}
#red {
    background:red;
}
#green {
    background:green;
}
#blue {
    background:blue;
}
#orange {
    background:orange;
}
#purple {
    background:purple;
}
#pink {
    background:pink;
}
#silver {
    background:silver;
}
#gold {
    background:gold;
}
#black {
    background:black;
}

JavaScript

var donut = document.querySelector('#grid');

donut.addEventListener('click', function (e) {  
    e.preventDefault();
    
    if (e.target.tagName === 'LI') {
         e.target.remove();
    }
} , false);