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
    el 29 may. 2020 a las 2:04
  • @Bryro, ya la edité amigo, he usado algunas pero no lo he conseguido.
    – LucasHN
    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
    el 29 may. 2020 a las 2:33

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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