0

Tengo la siguiente tabla y quiero que la imágen en el td anterior se elimine para crear uno nuevo cuando doy click a un elemento en un td que está al lado de ella, que es el boton con clase "replace".

<table>
    <tr>
        <td>
           <img src="picture.png" class=" c1 c2, c7">
        </td>
        <td>
           <button class="replace">Reemplazar imagen</button>
        </td>
        <td>
           <img src="picture.png" class=" c1 c2, c7">
        </td>
        <td>
           <button class="replace">Reemplazar imagen</button>
        </td>
    </tr>
    <tr>
        <td>
           <img src="picture.png" class=" c1 c2, c7">
        </td>
        <td>
           <button class="replace">Reemplazar imagen</button>
        </td>
        <td>
           <img src="picture.png" class=" c1 c2, c7">
        </td>
        <td>
           <button class="replace">Reemplazar imagen</button>
        </td>
    </tr>
    <tr>
        <td>
           <img src="picture.png" class=" c1 c2, c7">
        </td>
        <td>
           <button class="replace">Reemplazar imagen</button>
        </td>
        <td>
           <img src="picture.png" class=" c1 c2, c7">
        </td>
        <td>
           <button class="replace">Reemplazar imagen</button>
        </td>
    </tr>
</table>

Alguna idea, intente con prev(), pero no pude, tal vez podría hacerlo asignándole clases y eliminarlas así, pero tengo pensado en hacerlo dinámico más adelante con datos reales.

Lo que he intentado:

$('.replace').prev('td').closest('img').remove(); //no funciona
$('.replace').closest('img').remove(); //no funciona
$('.replace img').prev().remove(); //no funciona
$('.replace').prev('img').remove(); //no funciona
$('.replace').parents('tr').find('img').remove(); //si funciona pero me elimina todas las imagenes de la fila en los td
2
  • 1
    podrias incluir el codigo javascript de lo que as intentado hasta ahora?
    – Bryro
    Commented el 29 may. 2020 a las 2:04
  • @Bryro, ya la edité amigo, he usado algunas pero no lo he conseguido.
    – LucasHN
    Commented el 29 may. 2020 a las 2:14

1 respuesta 1

1

puedes hacerlo asi:

$('.replace').on("click",function(){
// del elemento clickeado
// buscamos a su padre 
// luego al elemento previo

let self = $(this).parent().prev().find('img');
// cambiamos el atributo src por otra imagen
// o lo que quieras
self.attr("src","https://via.placeholder.com/300");

})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <tr>
        <td>
           <img  src="https://via.placeholder.com/150" class=" c1 c2, c7">
        </td>
        <td>
           <button class="replace">Reemplazar imagen</button>
        </td>
        <td>
           <img src="https://via.placeholder.com/150" class=" c1 c2, c7">
        </td>
        <td>
           <button class="replace">Reemplazar imagen</button>
        </td>
    </tr>
    <tr>
        <td>
           <img src="https://via.placeholder.com/150" class=" c1 c2, c7">
        </td>
        <td>
           <button class="replace">Reemplazar imagen</button>
        </td>
        <td>
           <img src="https://via.placeholder.com/150" class=" c1 c2, c7">
        </td>
        <td>
           <button class="replace">Reemplazar imagen</button>
        </td>
    </tr>
    <tr>
        <td>
           <img src="https://via.placeholder.com/150" class=" c1 c2, c7">
        </td>
        <td>
           <button class="replace">Reemplazar imagen</button>
        </td>
        <td>
           <img src="https://via.placeholder.com/150" class="c1 c2, c7">
        </td>
        <td>
           <button class="replace">Reemplazar imagen</button>
        </td>
    </tr>
</table>

1
  • Muchas gracias amigo, es justo lo que necesito!!
    – LucasHN
    Commented el 29 may. 2020 a las 2:33

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.