How to remove parent using jQuery

Question

I have list item tags in my jsp. Each item in the list contains some items inside, including a link (tag "a") called delete. All I want to do is 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(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <li id="191" class="li"> <div class="text">Some text</div> <h4><a href="URL">Text</a></h4> <div class="details"> <img src="URL_image.jpg"> <span class="author">Some info</span> <div class="info"> Text <div class="msg-modification" display="inline" align="right"> <a name="delete" id="191" href="#">Delete</a> </div> </div> </div> </li> 

But that does not work. I am new to jQuery, so I tried some things, like for example:

 $(this).remove(); 

This works, deleting the link is deleted.

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

This works, it removes the specified list item, but not "dynamic".

Can someone give me some advice?

Answer 1

Just use the .closest() method: $(this).closest('.li').remove();
It starts with the current element, and then goes up the chain, looking for a suitable element, and stops as soon as it finds it.

.parent() refers only to the direct parent of the element, i.e. div.msg-modification , which does not match .li . That way, it never reaches the item you are looking for.

Another solution besides .closest() (which checks the current element and then goes up the chain) will use .parents() - however, this would be a warning that it does not stop as soon as it finds the corresponding element (and it does not check the current element, but only the parent elements). In your case, this does not really matter, but for what you are trying to do, .closest() is the most suitable method.

---

Another important thing:

NEVER use the same identifier for multiple elements. This is not allowed and causes very difficult to debug problems. Remove id="191" from the link and, if you need to access the identifier in the click handler, use $(this).closest('.li').attr('id') . Actually, it would be even cleaner if you used data-id="123" and then .data('id') instead of .attr('id') to access it (so your element id should not remind any row id (database?))

Answer 2

Use parents() instead of parent() :

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

Answer 3

how about using expand ()

 <div class="parent"> <p class="child"> </p> </div> 

after use - $(".child").unwrap() - this will be:

 <p class="child"> </p> 

Answer 4

Remove Parent:

 $(document).on("click", ".remove", function() { $(this).parent().remove(); }); 

Delete all parents:

 $(document).on("click", ".remove", function() { $(this).parents().remove(); }); 

Answer 5

 $('#' + catId).parent().remove('.subcatBtns'); 

Answer 6

You can also use this:

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