jQuery toggleClass example

Toggle class name on click in jQuery

by tutdiscoteca

HTML

<div class="input-group mb-3">
  <input type="text" id="input" class="form-control" placeholder="Введите размера..." aria-label="Введите размера" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <button id="button" class="btn btn-outline-secondary" type="button">Добавить размер</button>
  </div>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect2">Размеры</label>
    <select multiple name="size" value="[[+size]]" class="form-control" id="FormControlSelectSize">
      <option id="list"></option>
    </select>
  </div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

$("#button").click(() => {
  $("#FormControlSelectSize").append(`<option>${$("input").val()}</option>`);
	$("#input").val('');
  var items = document.getElementsByTagName("option");
  for (var i = 0; i < items.length; i++) {
    items[i].addEventListener("click", function(e) {
      e.target.remove();
    })
  }
});