Removing appended html using jQuery?

Question

Using jquery, I currently append html to a div on a click event. The following code allows me to fade in only the appended portion of the div:

var html = "..";
$('<div></div>').appendTo("#id").hide().append(html).fadeIn('slow');

This portion works perfectly. But how can I later remove (fade out) only the appended portion? I tried hacking this by storing the html prior to the appending, and then simply hiding everything and showing the stored html. But this does not work well when the same procedure is reused for several divs on the same page (and this seems like poor implementation). Is there a good way to do this?

Just to give an idea of why I need this: Think of a blog type page where for every article on the page there are several comments with only x amount showing by default: the click event fetches the remaining comments and displays them, and then toggling the button again removes the appended comments and sends it back to the original state.

JLeonard · Accepted Answer · 2010-01-23 22:26:20Z

8

empty() is always an option

jQuery('#main').empty();

answered Jan 23, 2010 at 22:26

JLeonard

9,2988 gold badges39 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

vidriloco · Accepted Answer · 2010-11-29 04:05:49Z

4

Give a look at the empty() function.

It might better solve the problem. Here's the link http://api.jquery.com/empty/

answered Nov 29, 2010 at 4:05

vidriloco

691 silver badge5 bronze badges

Comments

Noon Silk · Accepted Answer · 2009-08-13 00:15:00Z

3

I'd just set and clear the html with '.html()' ...

-- edit

to be more clear, have an area layed out specifically for the addition of these comments:

<div id='commentarea1'></div>

etc.

edited Aug 13, 2009 at 0:15

answered Aug 13, 2009 at 0:08

Noon Silk

55.4k6 gold badges91 silver badges105 bronze badges

3 Comments

oym Over a year ago

I don't follow...I need to append html to a block of already existing html..and then later remove only the portion that was appended

Noon Silk Over a year ago

Create a div that has nothing in it; write your content there, then just clear it (or hide it really).

oym Over a year ago

so simple...dont know why I didnt think of doing this...thanks!

Ken Browning · Accepted Answer · 2009-08-13 00:11:12Z

2

Try:

var html = "..";
$('<div></div>').appendTo("#id").hide().append(html).fadeIn('slow').addClass('appended');

then later

$('#id .appended').fadeOut('slow'); // or whatever you want to do.

answered Aug 13, 2009 at 0:11

Ken Browning

29.1k6 gold badges58 silver badges68 bronze badges

Comments

redsquare · Accepted Answer · 2009-08-13 00:12:22Z

0

It is not that clear from the question but say you show 5 comments by default and then show x more comments. To get back to the original 5 comment default state you can remove all comments with an index greater than 4 (zero based).

The following assumes each comment goes inside its own div that has a class comment.

$('#id>div.comment:gt(4)').remove();

answered Aug 13, 2009 at 0:12

redsquare

78.8k21 gold badges155 silver badges159 bronze badges

Collectives™ on Stack Overflow

Removing appended html using jQuery?

5 Answers 5

Comments

Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related