JSFiddle - React, Tailwind, and code Playground
HTML
<div id="divlist1">
<ul id="list1" class="basic">
<li>space</li>
<li>planet</li>
<li>planet2</li>
</ul>
</div>
CSS
#divlist1 {
display: inline-block;
*display: inline;
vertical-align: top;
font-size: 18px;
}
#divlist1 {
width: 33%;
}
.basic {
border: 2px solid silver;
}
.basic li {
margin: 5px;
padding: 10px;
background: #deaac0;
cursor: pointer;
border-radius: 0px;
list-style-type: none;
}
ul li:before {
content:"x";
position:relative;
left:-25px;
}
ul li {
text-indent:-5px;
}
JavaScript
$("#list1").sortable();
$("#list1").disableSelection();
$("#list1").on("click", "li", function () {
$(this).remove();
});