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();
$(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).$(this).closest(".lineasComanda")
sería lo correcto. ;)