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    x000D   x000D     a   click function event    x000D    event preventDefault    x000D      this  parent   li   remove    x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt li id  191  class  li  gt  x000D     lt div class  text  gt Some text lt  div gt  x000D     lt h4 gt  lt a href  URL  gt Text lt  a gt  lt  h4 gt  x000D     lt div class  details  gt  x000D       lt img src  URL image jpg  gt  x000D       lt span class  author  gt Some info lt  span gt  x000D       lt div class  info  gt  Text x000D         lt div class  msg-modification  display  inline  align  right  gt  x000D           lt a name  delete  id  191  href     gt Delete lt  a gt  x000D         lt  div gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  li gt  x000D   x000D   x000D    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 · 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:

<ul class="list">
  <li class="task">some text<span>X</span></li>
  <li class="task">some text<span>X</span></li>
  <li class="task">some text<span>X</span></li>
  <li class="task">some text<span>X</span></li>
  <li class="task">some text<span>X</span></li>
</ul>

User · Answer

what about using unwrap     lt div class  parent  gt   lt p class  child  gt   lt  p gt   lt  div gt    after using -     child   unwrap   - it will be    lt p class  child  gt   lt  p gt

User · Answer

Delete parent     document  on  click     remove   function              this  parent   remove           Delete all parents     document  on  click     remove   function               this  parents   remove

User · Answer

catId  parent   remove   subcatBtns

User · Answer

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

User · Answer

Use parents   instead of parent        a   click function event      event preventDefault        this  parents   li   remove

User · Answer

You could also use this     this  0  parentNode remove

[javascript] How to delete parent element using jQuery

Examples related to javascript

Examples related to jquery

Examples related to parent