How to delete parent element using jQuery

by

Simply use the .closest() method: $(this).closest('.li').remove();
It starts with the current element and then climbs up the chain looking for a matching element and stops as soon as it found one.

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

Another solution besides .closest() (which checks the current element and then climbs up the chain) would be using .parents() – however, this would have the caveat that it does not stop as soon as it finds a matching element (and it doesn’t check the current element but only parent elements). In your case it doesn’t really matter but for what you are trying to do .closest() is the most appropriate method.

Another important thing:

NEVER use the same ID for more than one element. It’s not allowed and causes very hard-to-debug problems. Remove the id="191" from the link and, if you need to access the ID 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 does not need to resemble whatever ID the (database?) row has)

More Related Contents:

  1. Why does appending a to a dynamically created seem to run the script in the parent page?
  2. How to find a parent with a known class in jQuery?
  3. this in chained jquery functions
  4. When we using alert vs popup div tag? [closed]
  5. How to use a variable for a key in a JavaScript object literal?
  6. How to change the href attribute for a hyperlink using jQuery
  7. jQuery Get Selected Option From Dropdown
  8. How can I add or update a query string parameter?
  9. Change the selected value of a drop-down list with jQuery
  10. When to use Vanilla JavaScript vs. jQuery?
  11. How do I get the (x, y) pixel coordinates of the caret in text boxes?
  12. Jquery/Ajax call with timer
  13. Replace multiple characters in one replace call
  14. Set window to fullscreen (REAL fullscreen; F11 functionality) by javascript
  15. Use images like checkboxes
  16. How to send a message to a particular client with socket.io
  17. How to manually trigger validation with jQuery validate?
  18. What does “return false;” do?
  19. How can I generate the opposite color according to current color?
  20. jQuery selector for an element that directly contains text?
  21. how to move a div with arrow keys
  22. input file to array javascript/jquery
  23. Bootstrap Dropdown with Hover
  24. jQuery: How to traverse / Iterate over a list of object
  25. How to get an Array with jQuery, multiple with the same name
  26. Get value from text area [duplicate]
  27. How to upload string as file with jQuery or other js framework
  28. fadeOut() and slideUp() at the same time?
  29. How to check if the user is online using javascript or any library?
  30. Jquery change text between two elements

Leave a Comment