ansaurus

Question

Answer 1

+3 A:

You can use .closest() to climb up the parents to your class="row" <div>, like this:

$(".removeRow").click(function() {
  $(this).closest("div.row").remove();
});

Nick Craver 2010-10-25 16:54:06

Just a question, what's the differens between prevAll() and closest() (I would use prevAll).

Tim 2010-10-25 16:56:45

@Tim `prevAll()` finds all previous siblings. Means all the previous entities who have the same parent as the element in which currently you are.

Alpesh 2010-10-25 17:08:53

@Tim - @Alpesh is correct, `.prevAll()` doesn't work here, it's looking at a different set of elements, not including the ancestors.

Nick Craver 2010-10-25 17:10:56

That make's things clear! Thanks a lot!

Tim 2010-10-25 17:18:59

This snippet of code helped me alot, I guess my last question would be if is possible to add some kind of effect like fadeOut or slideUp?

Ozzy 2010-10-25 18:17:12

@Ozzy - Yeah you can do that, like this: `$(this).closest("div.row").fadeOut(function() { $(this).remove(); });` a `slideUp()` would be the same way, but may look funny as the content re-flows, try it out and see which effect you like.

Nick Craver 2010-10-25 18:19:56

Answer 2

+1 A:

Here is a JSFiddle I made that basically does a loop that will walk up the DOM tree until it finds the parent node that has the class "row" or the body. If the node with the class is found it will remove it otherwise nothing is removed.

JSFiddle Example

subhaze 2010-10-25 18:20:36

I'm curious, why would you do this when [`.closest()`](http://api.jquery.com/closest/) is already built-in? Unless you're on jQuery < 1.3 this seems a bit redundant.

Nick Craver 2010-10-25 18:24:45

This script works fine, the only problem here is if you click on the first 'REMOVE' link it will remove the rest of the rows before removing itself.

Ozzy 2010-10-25 18:41:28

Very true, I had this opened up in a tab to answer later and did not see the above answer. I don't use JQuery so I took a quick look at the API and just tried to lend a helping hand.

subhaze 2010-10-25 18:45:29

@Ozzy I don't see that happening... I tested on FF and Chrome, here is an updated link that has the row number at top. All seems to be deleted correctly.http://www.jsfiddle.net/subhaze/LdAmy/3/

subhaze 2010-10-25 18:52:48

ansaurus

tags:

views:

answers:

Removing divs with jquery

related questions