.remove () removes only innerHTML NOT the entire tag as I want it to be

Question

I have a dynamically created list. Items from the list must be removed using the delete button. For some reason, however, it seems that only innerHTML is NOT the whole innerHTML tag and everything is just as I want. Maybe this has something to do with the selector that I use, but I can't figure it out.

Here is 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 expect it to remove li , the documented behavior of parentsUntil() is that it will not touch li . You need:

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

Answer 2

.parentsUntil() does not return the element matching the selector.

Instead, you want to call .closest() .