JSFiddle - React, Tailwind, and code Playground

by Vadim

HTML

<div class="selector">
  <ul class="selector__list"></ul>
  <input type="text" class="selector__input">
</div>

CSS

.selector {
    display: inline-flex;
    align-items: center;
    padding: 5px;
    border: 1px solid black;
    border-radius: 8px;
}

.selector__list {
    display: flex;
    align-items: center;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.selector__input {
    border: none;
}

.selector__item {
  margin-right: 5px;
}

JavaScript

const selector = document.querySelector('.selector')
const input = selector.querySelector('.selector__input')
const list = selector.querySelector('.selector__list')

selector.addEventListener('click', onSelectorClick)

input.addEventListener('change', addItem)

function addItem({target}) {
  const value = target.value
  const item = createSelectorItem(value)
  
  list.appendChild(item)
  target.value = ''
}

function createSelectorItem(value) {
  const item = document.createElement('li')
  item.classList.add('selector__item')
  item.textContent = value
  
  const removeItem = document.createElement('button')
  removeItem.classList.add('selector__remove-item')
  removeItem.innerHTML = '&times;'
  
  item.appendChild(removeItem)

  return item
}

function onSelectorClick({target, currentTarget}) {
  if(target.classList.contains('selector__remove-item')) {
    target.parentElement.remove()
  }
}