How to delete parent element using jQuery

Question

I have some list item tags in my jsp. Each list item has some elements inside, including a link ("a" tag) called delete. All that I want is to delete the entire list item when I click the link.

Here is the structure of my code:

$("a").click(function(event) {
  event.preventDefault();
  $(this).parent('.li').remove();
});



  Some text
  Text
  
    
    Some info
     Text
      
        Delete

But this doesn't work. I'm new at jQuery, so I tried some things, like for example:

$(this).remove();

This works, it deletes the link when clicked.

$("#221").remove();

This works, it deletes the indicated list item, but it's not "dynamic".

Can someone give me a tip?

user_9811343 · Answer

You could also use this:

$(this)[0].parentNode.remove();

user_11667949 · Answer

I have stumbled upon this problem for one hour. After an hour, I tried debugging and this helped:

$('.list').on('click', 'span', (e) => {
  $(e.target).parent().remove();
});

HTML:


  some textX
  some textX
  some textX
  some textX
  some textX

How to delete parent element using jQuery

7 Answers