How to remove div using jquery?

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.

Answer 2

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

Documentation: http://api.jquery.com/remove/