Posteriormente a consultar con expertos en el tema, programadores de deferentes áreas y maestros hemos dado con la respuesta al problema y la dejamos plasmada en este post.
Solución:
Simplemente use el .closest() método: $(this).closest('.li').remove();
Comienza con el elemento actual y luego sube por la cadena en busca de un elemento coincidente y se detiene tan pronto como encuentra uno.
.parent() solo accede a la directo padre del elemento, es decir div.msg-modification que no coincide .li. Por lo que nunca llega al elemento que buscas.
Otra solución además .closest() (que verifica el elemento actual y luego sube por la cadena) estaría usando .parents() – sin embargo, esto tendría la advertencia de que no se detiene tan pronto como encuentra un elemento coincidente (y no verifica el elemento actual pero solamente elementos padres). En su caso, realmente no importa, pero para lo que está tratando de hacer .closest() es el método más adecuado.
Otra cosa importante:
NUNCA utilice el mismo ID para más de un elemento. No está permitido y causa problemas muy difíciles de depurar. Quitar el id="191" desde el enlace y, si necesita acceder a la ID en el controlador de clics, use $(this).closest('.li').attr('id'). En realidad, sería aún más limpio si usaras data-id="123" y entonces .data('id') en vez de .attr('id') para acceder a él (por lo que su ID de elemento no necesita parecerse a cualquier ID que tenga la fila (¿base de datos?))
¿Qué pasa con el uso de unwrap ()
después de usar – $(".child").unwrap() – será;
Usar parents() en vez de parent():
$("a").click(function(event)
event.preventDefault();
$(this).parents('.li').remove();
);