Welcome aboard! We are happy you are here and wish you good net-raft!
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('input.deletable').wrap('<span class="deleteicon" />').after($('<span/>').click(function() {
$(this).prev('input').val('').trigger('change').focus();
}));
});
</script>
<style>
span.deleteicon {
position: relative;
}
span.deleteicon span{
position: absolute;
display: block;
top: 5px;
right: 0px;
width: 16px;
height: 16px;
background-image: url('https://www.freeiconspng.com/uploads/blue-delete-button-png-29.png');
cursor: pointer;
background-size: 100% 100%;
}
span.deleteicon input {
padding-right: 16px;
box-sizing: border-box;
}
</style>
</head>
<body>
<input type="text" class="deletable" value="your value">
</body>
</html>
The most helpful JQUERY solutions