Question

I have this code:

   <div class="container">
    <div class="row">
      <div class="col">
        <a href="1" class="delete_activity">x</a> 
      </div>
    </div>  
    <div class="row">
      <div class="col">
        <a href="2" class="delete_activity">x</a> 
      </div>
    </div>  
    <div class="row">
      <div class="col">
        <a href="3" class="delete_activity">x</a> 
      </div>
    </div>  
  </div>          

After the click on “delete_activity” I need to remove the “row” div that have that link.
In the case the user click on X (href=1) i need to remove:

    <div class="row">
      <div class="col">
        <a href="1" class="delete_activity">x</a> 
      </div>
    </div>  

How can I do it with JQuery?

Answer 1

The best way to do this is use closest().

$('.delete_activity').click(function(){
    $(this).closest('.row').remove();
});

Don’t use parents (unless thats the behaviour you want).

closest will only remove the first element found up the DOM tree.

parents will remove ALL elements matched up the DOM tree.