CODEWITHSUNDEEP
jquerydynamicdelegatesappendlive
Lee Torres
Lee Torres

Reputation: 561

Removing an appended item and adding more elements (involves AJAX)

When a button on a page gets clicked, it removes divs from the page, runs an Ajax function, and then uses data from the Ajax function to create more divs of the same class.

If the button is clicked again, the divs created through the Ajax function should be removed, and more divs should be added through another Ajax request.

The problem I'm getting is that it doesn't completely work. The first time the button is clicked, it does as its supposed to do (removes the divs, and adds new divs). When the button gets clicked a second time, none of the divs are removed (the divs that were appended), and more divs are added.

Is there a way to get these appended divs to be removed? I'm not sure if this involves the live, delegate, or on functions, but all the examples I see online use two separate buttons, one for triggering an event that creates divs, while another button removes them. I want all these events to happen using the same button

Example Divs for the HTML (Sorry I'm not posting the full html, I'm using a framework for Erlang and the original code templating all over the place, this is the sample output: 

<div id="tweet-container">
<div class="tweets"  style="width:940px">
<img style="float:left; width: 60px; padding-right: 9px" src=http://a0.twimg.com/profile_images/2454954651/Snapshot_20120528_normal.jpg> <p     style="float:right">Fri, 09 Nov 2012 20:29:05 +0000</p>
<td><a href="http://twitter.com/PndWallace"><b>Pat Wallace</b></a> @PndWallace</td>
<td><p>RT @NASANPP: RT @pndwallace: @NASA @NASANPP looks like we in Ireland are living in phtytoplankton Central....makes me feel better lol </p></td>

</div>

<div class="tweets" style="width:940px">
<img style="float:left; width: 60px; padding-right: 9px" src=http://a0.twimg.com/profile_images/280761746/calvin-and-hobbes_normal.jpg> <p style="float:right">Fri, 09 Nov 2012 20:29:38 +0000</p>
<td><a href="http://twitter.com/rentagoodbook"><b>Lise</b></a> @rentagoodbook</td>
<td><p>RT @NASA: [Image of the Day] Happy Little Crater on Mercury http://t.co/CQbuLPNi #iotd </p></td>

</div>
</div>

Script:

function removeTweets(){

$('div').remove('#tweets');


}


function ajaxCheck(){

$('a.Tpage').click(function(evt){

$currentPage = $('#pageNo').text();
$totalPages = $('#totalPages').text();
$searchWord = $('#searchWord').text();
$selection = $(this).attr('title');

$.ajax({
url: "/search/get_tweet_page/" + $currentPage + "/" + $totalPages + "/" + $searchWord +
"/" + $selection,
dataType: "json",

}).done(function(data){
removeTweets();
var list = data.tweet;
for (var i = 0; i < list.length; i++){

$('#errors').append('<div class="tweets" style="width:940px">' +
             '<img style="float:left; width: 60px; padding-right: 9px" src="' + list[i].profileimage_url + '">' +
             '<p style="float:right">' + list[i].created_at + '</p>' +
             '<td><a href="http:///twitter.com/' + list[i].from_user + '"><b>' + list[i].fromuser_name + '</b></a>' + list[i].from_user + '</td>' +
             '<td><p>' + list[i].text + '</p></td>' +
             '</div>');

} // end for
}); // end done
evt.preventDefault();

}) //end click

Upvotes: 1

Views: 582

Answers (1)

juan.facorro
juan.facorro

Reputation: 9930

In the removeTweets() function use the class selector .tweets instead of the id selector #tweets.

Upvotes: 1

Related Questions