JSFiddle - React, Tailwind, and code Playground
HTML
<ul>
<li>item one <div class='deleteMe'>X</div></li>
<li>item two <div class='deleteMe'>X</div></li>
<li>item three <div class='deleteMe'>X</div></li>
<li>item four <div class='deleteMe'>X</div></li>
<li>item five <div class='deleteMe'>X</div></li>
<li>item six <div class='deleteMe'>X</div></li>
<li>item seven <div class='deleteMe'>X</div></li>
<li>item eight <div class='deleteMe'>X</div></li>
<li>item nine <div class='deleteMe'>X</div></li>
</ul>
CSS
ul li{
list-style: none;
background: gray;
margin: 2px;
border-raius: 5px;
padding: 5px;
}
.deleteMe{
float: right;
background: yellow;
}
JavaScript
$(document).ready(function(){
$(".deleteMe").on("click", function(){
$(this).closest("li").remove();
});
});