2

El problema que tengo es que puedo visualizar la imagen pero al momento de hacer click a remover se elimina todo el div (<div id="preview"></div>) Le dejo mi codigo para lo revisen ya que no me permite visualizar otras imagenes, gracias

function readURL(input) {
     for(var i =0; i< input.files.length; i++){
         if (input.files[i]) {
            var reader = new FileReader();

            reader.onload = function (e) {
            
               var img = $('<img id="dynamic">');
               img.attr('src', e.target.result);
               img.attr('width','100');
               img.appendTo('#preview');  
               img.after('<a href="#" class="del">remove</a>'); 
                        }
            reader.readAsDataURL(input.files[i]);
           }
        }
    }

    $("#imgUpload").change(function(){
        readURL(this);
    });


    $('#preview').on('click', '.del', function() {
    $(this).parent().remove();
        
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<form id="form1" runat="server">
    <input type="file" id="imgUpload" multiple/>
</form>
<div id="preview"></div>

3
  • porque no intentas colocar la etiqueta <img> dentro de tu <div id="preview"> y solo le quitas y le pones el atributo src
    – Gomaru
    Commented el 14 sept. 2022 a las 19:11
  • es que se ve veria un cuadro de imagen que no se visualiza (no tiene ruta) ya que lo probe con 3 exploradores de internet, por ese motivo lo tengo dentro de un jquery Commented el 14 sept. 2022 a las 19:14
  • "es que se ve veria un cuadro de imagen que no se visualiza" -> Pues ocúltalo mientras no tiene imagen y lo muestras cuando la tiene. No necesitas ni quitar la imagen, simplemente pones la imagen que quieres y la muestras, en vez de quitarlo lo ocultas... cuando quieras volver a mostrarlo simplemente cambias la imagen y la muestras de nuevo. No hace falta andar tocando el DOM
    – Benito-B
    Commented el 14 sept. 2022 a las 20:27

1 respuesta 1

1

Cambia el código del botón por este:

$('#preview').on('click', '.del', function() {
  $(this).prev('img').remove(); //Quita la imagen del elemento previo al botón "remover"
  $(this).remove();//Quita el botón también
});
2
  • Gracias amigo me funciono el codigo se agradece Commented el 14 sept. 2022 a las 19:32
  • @VictorHugo, si te sirvió la respuesta, márcala como aceptada, por favor. Así, otros usuarios con problemas similares sabrán que esto puede servirles.
    – Triby
    Commented el 14 sept. 2022 a las 20:06

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.