JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="bulk">
    <li id="one">Direct LI
        <ul>
            <li id="child">Nested li
                <div id="foo">Random div element</div>
            </li>
        </ul>
    </li>
    <li id="bmw">Direct LI</li>
    <span>Random span element</span>
</ul>

CSS

#bulk {
    height: 200px;
    border: 1px solid;
}
#bulk > li {
    background: red;
    margin: 10px;
}

JavaScript

var ul = document.getElementById('bulk'); // Parent

ul.addEventListener('click', function (e) {
    var target = e.target; // Clicked element
    while (target && target.parentNode !== ul) {
        target = target.parentNode; // If the clicked element isn't a direct child
        if(!target) { return; } // If element doesn't exist
    }
    if (target.tagName === 'LI'){
      alert(target.id); // Check if the element is a LI
    }
});