Error while deleting table row from screen using event delegation

hi this is my code https://codepen.io/anikettiwari/pen/gOPyYzj?editors=1010, in it when
i’m clicking on dustbin icon sometimes my table row is deleting but sometimes an error is
popping up in console pic is attached


like in the above picture my rows are deleted but I am still getting this error.
Also due to this my experience with is not smooth sometimes it deletes the row while sometimes it does not.
how can i solve it and what is my mistake

i thing itemId = event.target.parentNode.parentNode.parentNode.parentNode.id; is creating some problem, as sometimes it is returning id of the desired row then deletion is occurring while sometimes it showing that null value, but i’m not getting how?

on looking to the console log it is clear that
event.target.id = delBtn
event.target.parenetNode.id = del
event.target.parenetNode.parenetNode.id = trainee–detail
event.target.parenetNode.parenetNode.parenetNode.id = must be my desired row

but also in console i guess these extra trainee--detail coming due to pointer click is changing things and is not returning my desired row in one go how can i resolve it
is there problem in my css dustbin icon positioning.


help:
in HTML , dustbin has id id = "delBtn" and parent id is id="del"
in js , deleting code begins from line 101