Desarrollé un carrusel dinámico. Dentro de un formulario muestro varios registros y el ID de estos registros está relacionado con n número de imágenes que muestro en un carrusel, haciendo que tenga n número del carrusel con n número de imágenes cada uno.

El problema está en la visualización. Cuando empiezo a jugar con los carruseles varias veces, empiezan a mostrar las imágenes superpuestas mezclando ambas imágenes, por ejemplo.

Mi pregunta es, ¿qué debo " limpiar " al cargar las imágenes para que no pasen cosas así?

Ejecuto esta función JavaScript, Ajax para armar el carrusel:

 function GetEvidenceScrap(id) { var idcompleto = id.id; var i = 0; var idbutton = idcompleto.substring(2, idcompleto.length); $.ajax({ method: "GET", url: "Coordinador/GetEvidenceScrap", contentType: "aplication/json; Charset=utf-8", data: { 'idscrap': idbutton }, async: true, success: function (result) { console.log("Longitud: " + result.length); while (i < result.length) { var carousel = document.getElementById('CI_' + idbutton); if (i == 0) { var div = document.createElement('div'); div.setAttribute('class','carousel-item active'); var img = document.createElement("img"); img.setAttribute('class', 'd-block w-100'); div.appendChild(img); img.setAttribute('src', '/Evidence/' + result[i].rutevidencia); carousel.appendChild(div); i++; } else { var div = document.createElement('div'); div.setAttribute('class', 'carousel-item'); var img = document.createElement('img'); img.setAttribute('class', 'd-block w-100'); div.appendChild(img); img.setAttribute('src', '/Evidence/' + result[i].rutevidencia); carousel.appendChild(div); i++; } } console.log(result); } });

Función en C#:

 [HttpGet] public List<Evidencia> GetEvidenceScrap(int idscrap) { var idscrapparametro = new SqlParameter("@idscrap", idscrap); var listaevidencescrap = _context.Evidencias.FromSqlRaw($"SELECT IDRegistro, IDScrap, rutevidencia FROM dbo.F_GetEvidenceScrap(@idscrap)", idscrapparametro); return listaevidencescrap.ToList(); }

Gracias