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

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.