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.

Answer 1

empty() is always an option

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

Answer 2

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.

Answer 3

Give a look at the empty() function.

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

Answer 4

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.

Answer 5

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();