Remove span from select2

Question

I am using select2 which generates your selection and I have this, and I need to remove the 'x' from span:

This code prints the span element:

 for (let i = 0; i < valores.length; i++) {
     const option = new Option(valores[i]['nombre'], valores[i]['nombre'], true, valoresLocalStorage.includes(valores[i]['nombre']));
     valoresSelect.append(option).trigger('change');
 }

 valoresSelect.closest('[data-controller="fields--select"]').find('.select2-selection__choice').each(function () {
          console.log($(this).find('.select2-selection__choice__remove'));
          console.log('Span');

         $(this).find('.select2-selection__choice__remove').hide();
 });

In the chrome show me the console.log but does not hide it:

EVdn.k.fn.init [span.select2-selection__choice__remove, prevObject: EVdn.k.fn.init(1)] asociar:815 Span

user_10606400 · Answer

You can use display: none !important; to hide close button inside select2 dropdown

Demo Code :

$("#somethings").select2();
$('#somethings').val(['1', '2']);
$('#somethings').trigger('change');

.select2-selection__choice__remove {
  display: none !important;
}

Other way using jquery :

var valoresSelect = $("#somethings")
valoresSelect.select2()
//this is just for demo...
valoresSelect.val(['1', '2']);
valoresSelect.trigger('change');
remove_buttn();
//use this if you need to hide when user select other opitons..same do for https://select2.org/programmatic-control/events
valoresSelect.on('select2:select', function(e) {
  remove_buttn();
});

function remove_buttn() {
  //use next here
  valoresSelect.next().find('.select2-selection__choice').each(function() {
    $(this).find('.select2-selection__choice__remove').hide();
  });
}

Remove span from select2

1 Answers