2

Pues como dice el titulo estoy intentando eliminar elementos que añado a un div con .append pero no lo consigo.

El .append

$("#elPedido").append('<div class="lineasComanda">\
                         <div class="row" style="margin: 0px;">\
                            <div class="col-2 center" style="padding: 0px;">\
                               <img src="'+ resultProNormal.productNormal.foto +'" alt="" class="imgComanda">\
                            </div>\
                            <div class="col-5" style="padding: 0px;">\
                               <h2>'+ resultProNormal.productNormal.name +'</h2>\
                               <small>Familiar</small>\
                            </div>\
                            <div class="col-1" style="padding: 0px;">\
                                <h5>x1</h5>\
                            </div>\
                            <div class="col-2 txtRight" style="padding: 0px;">\
                                <h5>'+ resultProNormal.productNormal.precio +'€</h5>\
                            </div>\
                            <div class="col-2 center" style="padding: 0px;">\
                                <div class="deleteFila"><a class="delete"><i class="far fa-trash-alt"></i></a></div>\
                                </div>\
                            </div>\
                         </div>');

La función para eliminar

$("body").on("click",".deleteFila", function(){
  var indice = $(".deleteFila").index(this);
  console.log(indice);
  //carrito.splice(indice, 1);
  $(this).parent(".lineasComanda").remove();
});

El console.log(indice) si me trae el indice de forma correcta, es decir la función si esta funcionando. Si por lo contrario al append le quito todos el .div row y los cols dejando solo un div dentro de lineasComanda si que me lo elimina sin problemas.

No se como llegar a que me coja todos esos divs.

Saludos

Edición

Lo he solucionado así pero no se si está bien porque no llego a comprender por que así funciona.

$(this).closest(".lineasComanda").remove();
6
  • Claro, es que para que la llamada $(this).parent(".lineasComanda") funcionase, el div .lineasComanda tendría que ser su padre inmediato, y no lo es porque se interpone el .row entre ellos. $(this).closest(".lineasComanda") te funciona porque la función .closest() busca al padre más cercano que cumpla con las condiciones indicadas (que no tiene por qué ser el inmediato).
    – Bettylex
    Commented el 19 sept. 2021 a las 17:07
  • Entonces es correcto @Bettylex ? por lo que dices imagino que si
    – Miguel
    Commented el 19 sept. 2021 a las 17:08
  • Así es. $(this).closest(".lineasComanda") sería lo correcto. ;)
    – Bettylex
    Commented el 19 sept. 2021 a las 17:08
  • 1
    Claro, me parece bien si puede servir a alguien. Voy a ello.
    – Bettylex
    Commented el 19 sept. 2021 a las 17:10
  • 1
    Muchas gracias @Bettylex
    – Miguel
    Commented el 19 sept. 2021 a las 17:11

1 respuesta 1

2

Dada tu estructura HTML, la llamada $(this).parent(".lineasComanda") no puede funcionar porque la función .parent() busca al padre inmediato y, en este caso, el div .lineasComanda no lo es, ya que el div .row se interpone entre ellos.

$(this).closest(".lineasComanda") es lo correcto en este caso, ya que la función .closest() busca al padre más cercano que cumpla con las condiciones indicadas, así que se salta al padre .row (por no cumplirlas) y logra llegar al .lineasComanda.

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.