Bootstrap4C

A selection of lightweight Bootstrap 4 UI components.

View on GitHub

Tageditor

bootstrap4c-tageditor

Markup

<input type="text" class="form-control form-control-tag">
<button type="button" class="btn btn-outline-danger btn-sm btn-remove-tags">Clear tags</button>

Javascript

$('.form-control-tag').tagEditor({
    initialTags: ['Hello', 'World'],
    delimiter: ', ',
    forceLowercase: false,
    animateDelete: 0,
    placeholder: 'Enter tag...'
});
// Removing all tags
$(document).on('click', '.btn-remove-tags', function() {
  $('.form-control-tag').next('.tag-editor').find('.tag-editor-delete').click();
});