i have this Api, thi api fetch data to feed select2 ajax
public async Task<IActionResult> Search(string term)
{
try
{
var data = await _context.ScrapCodes
.Where(sc => sc.Name.Contains(term) || sc.Code.ToString().Contains(term))
.ToListAsync();
return Ok(data);
}
catch (Exception)
{
return Ok();
}
}
this function will initialize select 2 form with new id
function initializeSelect2(elem) {
elem.select2({
placeholder: "search here",
allowClear: true,
width: 'resolve',
ajax: {
url: "/api/digitalization/search",
contentType: "application/json; charset=utf-8",
data: function (params) {
var query =
{
term: params.term,
};
return query;
},
headers: {
"RequestVerificationToken":
$('input[name="__RequestVerificationToken"]').val()
},
processResults: function (data) {
return {
results: $.map(data, function (item) {
return {
id: item.code,
text: item.code + ' - ' + item.name
}
})
}
}
}
});
}
this button function to add new select2 eachtime it clicked
$("#add_select").on("click", function () {
var div1 = $("<div id ='scp_"+ele+"' class='col-md-8'>");
var div2 = $("<select id='scrap_code" + ele + "' name='scrap_code" + ele + "' class='form-control _select2' placeholder='Code scrap' />");
var div3 = $("</div>" +
"<div class='col-md-4'>" +
"<input id='scrap_val" + ele + "' name='scrap_val" + ele + "' class='form-control' placeholder='jumlah scrap' />" +
"</div>");
var div4 = $("<input type='button' id='_delete"+ele+"' value='Remove' />");
$("#id_select").append(div1);
$("#id_select").append(div2);
$("#id_select").append(div4);
$("#id_select").append(div3);
initializeSelect2(div2);
ele++;
startElement.val(++value);
$(div4).on('click', function (e) {
e.preventDefault();
$(div2).select2('destroy');
var elem = document.parentElement(div4);
elem.parentNode.removeChild(elem)
startElement.val(--value);
});
});
What should i do if i want to remove selected item from select list each time the value is selected from dynamicly created select2 form?