JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box1">
<div id="box2"><input type="text" id="refdocs"></div>
<div id="container">
	<div id="list1">
		<ul>
		  <li>Coffee</li>
		  <li>Tea</li>
		  <li>Milk</li>
		</ul>
	</div>
</div>
</div>
<input type="button" value="delete" onclick="remove_selected_item()">

CSS

* {
	font-size: 9pt;
	font-family: Segoe UI;

}
#refdocs {
	border: 0;
	padding: 2px;
}
#box1 {
	border: 1px solid rgb(170,170,170);
	width: 200px;
}
#box2 {
	width: 100%;
	display: block;
	position: relative;
	border-bottom: 1px solid rgb(170,170,170);
}
#container {
	height: 100px;
	overflow-y: scroll;
	overflow-x: hidden;
}
#list1 {
	width: 100%;
}
#list1 ul {
	margin: 0;
	padding: 0px;
	list-style-type: none;
}
#list1 li {
	cursor: default;
	padding: 2px;
}
.selected {
	background: rgb(228,228,228);
}

JavaScript

refresh_list()



function remove_selected_item() {

	if ( $('#list1 ul li').hasClass("selected") ) {
	
		alert("yup");
		$('#list1 ul li').remove()	
	}
	else {
		alert("nope")
	}
}


function refresh_list() {

	$('#list1 ul li').click(function () {
	    $('#list1 ul li').removeClass('selected');
	    $(this).addClass('selected');
	    
	    document.getElementById('refdocs').value = $(this).text()
	    
	});

}