CODEWITHSUNDEEP
jquery
Dail
Dail

Reputation: 4606

How to remove div using jquery?

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?

Upvotes: 2

Views: 15751

Answers (5)

Ya Zhuang
Ya Zhuang

Reputation: 4660

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

Upvotes: 2

talkshowhost
talkshowhost

Reputation: 204

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

Use first to get the first parent above!

Upvotes: 0

Damon Bauer
Damon Bauer

Reputation: 2726

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

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

Upvotes: 4

PeeHaa
PeeHaa

Reputation: 72672

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.

Upvotes: 9

JaredPar
JaredPar

Reputation: 754725

Try the following 

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

Upvotes: 0

Related Questions