delete select option onclick

Question

I am working with the following extension: https://select2.org

This is my code:

$('.phoneNumbers').select2({
  tags: true
});

This is my result:

But now I would like to realize:

Each option should has a "delete icon". If I click on it, this option element should be deleted.

I can't found anything about this in the api documentation. Any idea?

user_295783 · Answer

Hmm, seems that is not trivial.

The select2 does not allow you to steal the click

I hacked the options here

$(document).on("click", ".delete", function(e) {
  const val = $(this).parent()[0].firstChild.textContent;
  $(".phoneNumbers").find("option[value=" + val + "]").remove()
  $('.phoneNumbers').select2("destroy")
  $('.phoneNumbers').select2({
    tags: true,
  })

})


$('.phoneNumbers').select2({
  tags: true,
})

$(".select2-selection__rendered").append("X")

/* Select2 reset X 
$('.phoneNumbers').select2({
  tags: true,
  placeholder: 'Please select',
  allowClear: true
});

*/

select {
  width: 35%
}

span.delete {
  color: red;
  display: inline-block;
  float: right
}

delete select option onclick

1 Answers