Delete Pill badges when clicking on them

Question

I am using bootstrap 5 and I am adding via jquery Pill badges.

When clicking the pill badge I would like to remove it.

Find below my working example:

$("#listBtn").click(function() {
  let txt = $('#fruits').val();
  $("#symbolPicks").append(`${txt}`);
  $("#fruits").val("");
});

var substringMatcher = function(strs) {
  return function findMatches(q, cb) {
    var matches, substringRegex;

    // an array that will be populated with substring matches
    matches = [];

    // regex used to determine if a string contains the substring `q`
    substrRegex = new RegExp(q, 'i');

    // iterate through the pool of strings and for any string that
    // contains the substring `q`, add it to the `matches` array
    $.each(strs, function(i, str) {
      if (substrRegex.test(str)) {
        matches.push(str);
      }
    });

    cb(matches);
  };
};

var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
  'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
  'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
  'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
  'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
  'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
  'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
  'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
  'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
];

$('#the-basics .typeahead').typeahead({
  hint: true,
  highlight: true,
  minLength: 1
}, {
  name: 'states',
  source: substringMatcher(states)
});

span.twitter-typeahead .tt-menu {
  cursor: pointer;
}

.dropdown-menu,
span.twitter-typeahead .tt-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 1rem;
  color: #373a3c;
  text-align: left;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.25rem;
}

span.twitter-typeahead .tt-suggestion {
  /* display: block; */
  width: 100%;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.5;
  color: #373a3c;
  text-align: inherit;
  white-space: nowrap;
  background: #fff;
  border: 0;
}

span.twitter-typeahead .tt-suggestion:focus,
.dropdown-item:hover,
span.twitter-typeahead .tt-suggestion:hover {
  color: #2b2d2f;
  text-decoration: none;
  background-color: #f5f5f5;
}

span.twitter-typeahead .active.tt-suggestion,
span.twitter-typeahead .tt-suggestion.tt-cursor,
span.twitter-typeahead .active.tt-suggestion:focus,
span.twitter-typeahead .tt-suggestion.tt-cursor:focus,
span.twitter-typeahead .active.tt-suggestion:hover,
span.twitter-typeahead .tt-suggestion.tt-cursor:hover {
  color: #fff;
  text-decoration: none;
  background-color: #0275d8;
  outline: 0;
}

span.twitter-typeahead .disabled.tt-suggestion,
span.twitter-typeahead .disabled.tt-suggestion:focus,
span.twitter-typeahead .disabled.tt-suggestion:hover {
  color: #818a91;
}

When clicking the button I am adding the input value to the list.

I would like to delete the tag if I click it. One further question: Is there also a way in bootstrap 5 to add a X on the top right?

I really appreciate your replies!

user_661872 · Answer

Add a click event, like:

$("#listBtn").click(function() {
  let txt = $('#fruits').val();
  
  let span = $('').text(txt)
  span.click(() => span.remove())
  
  $("#symbolPicks").append(span);
  $("#fruits").val("");
});

If you want a X, like a tag, then enhance the span and place the click event on the X not on the whole span etc

Delete Pill badges when clicking on them

1 Answers