javascript - Removing appended html using jQuery? - Stack Overflow

admin管理员组

文章数量:1202804

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.

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.

• javascript
• jquery
• html

Share Improve this question Follow asked Aug 13, 2009 at 0:04 oymoym 7,0831717 gold badges6464 silver badges8989 bronze badges

Add a comment  | 

5 Answers 5

Sorted by: Reset to default 8

empty() is always an option

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

Give a look at the empty() function.

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

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.

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.

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

本文标签： javascriptRemoving appended html using jQueryStack Overflow