Question

I have a dynamically created list. Items from the list should be able to be removed using a delete button. For some reason, however, it seems to be only deleting the innerHTML NOT the entire tag innerHTML and all, like I want it too. It possibly has something to do with the selector I am using, but I can’t seem to figure it out.

Here’s the code.

Thanks in advance!

$('#courses').on('click', '.del', function() {
     var tempIndex = $(this).parentsUntil('li').index();
     reducePlanned(myListInfo[tempIndex-1].credits, myListInfo[tempIndex-1].gpa);
     myListInfo.splice(tempIndex-1,1);
     document.getElementById('hrs_planned').innerHTML = '<b>Hours: '+getStringHrs(planned_hrs)+' GPA: '+toStringGPA(planned_gpa)+'</b>    ';
     document.getElementById('header').innerHTML = 'Total Hours: '+getStringHrs(prev_hrs+planned_hrs)+' GPA: '+toStringGPA(((prev_hrs*    prev_gpa)+(planned_hrs*planned_gpa))/(planned_hrs+prev_hrs));
     $(this).parentsUntil('li').remove();
     return false;
});

Answer 1

If you’re expecting it to remove the li, the documented behavior of parentsUntil() is that it won’t touch the li. You need:

$(this).parentsUntil('li').parent().remove();