jQuery - after AJAX Call, old elements still exist in DOM? How to remove?

I have a button to refresh the content using AJAX, calling refreshFeed(). I still need to manipulate the content loaded by AJAX so I appended .live() to some links in the AJAX-loaded content to initiate other AJAX calls, let's say "Comment". "Comment" button gather some values from the hidden input fields and post them to server.

It works fine if I don't click refresh. However, I found that after several refreshes, when I click the links that have .live('click', function(){}) bond (The "comment" button), it will send multiple POST requests to server. I guess it's because the old DOM elements still exist, so I tried to remove all elements using .remove(), .empty() in refreshFeed(). But the problem remains.

Here is the code:

$.ajaxSetup({
    cache: false
});
$(".submit-reply").live('click', function () {
    var mIDValue = $(this).parent().find("input.re-fb-msg-id").val();
    var accessValue = $(this).parent().find("input.re-fb-token").val();
    var commentValue = $(this).parent().find(".comment").val();
    var postReplyUrl = "fconfirm.jsp";
    var ajax_reply_load = "<img src='img/scanningsmall.gif' alt='loading...' />";
    $(this).parent().parent().find(".result-note").show();
    $(this).parent().parent().find(".result-note .out-container").html(ajax_reply_load).fadeIn(300).load(postReplyUrl, {
        mID: mIDValue,
        access: accessValue,
        comment: commentValue,
    });
    $(this).parent().hide();
});

function refreshFeed() {
    $.ajaxSetup({
        cache: false
    });
    $("#feeds div").remove();
    $(".submit-reply").remove();
    var loadingFeeds = "<div class='loadin开发者_StackOverflow中文版g-feed'><img src='img/scanningsmall.gif' alt='loading...' /><p>Loading...</p></div>"
    var feedURL = "pbsc.htm"
    var feedParameter = "clientId=<%=clientId%>&getPostTweets=1&rescan=1";
    $("#feeds").html(loadingFeeds).load(feedURL, feedParameter);
}

I am new to Jquery and really don't know where the problem is. Please help me! Thank you!

if your old elements have sent request those can be stopeed by using ajax request object. you can use ajax request object.

var request;// have global variable for request

//...........
    var request = $.ajax({
        type: 'GET',
        url: 'someurl',
        success: function(result){
         $(yourSelecter).html(result);
       }
    });




function refreshFeed() {
request.abort()// in refreshfeed function you can abort it

}

and if you have sevaral ajax requests you can use an array of ajax requests

$.xhrPool = [];//global variable for array

$.xhrPool.abortAll = function() {  
  _.each(this, function(jqXHR) {
    jqXHR.abort();
  });
};
$.ajaxSetup({
  beforeSend: function(jqXHR) {
    $.xhrPool.push(jqXHR);
  }
});

........EDIT.........

I think your problem is with live function. I assume that your .submit-reply is in pbsc.htm so instead of using live function try this code. This will

function BindClick(){

 $(".submit-reply").Click(function () {
    var mIDValue = $(this).parent().find("input.re-fb-msg-id").val();
    var accessValue = $(this).parent().find("input.re-fb-token").val();
    var commentValue = $(this).parent().find(".comment").val();
    var postReplyUrl = "fconfirm.jsp";
    var ajax_reply_load = "<img src='img/scanningsmall.gif' alt='loading...' />";
    $(this).parent().parent().find(".result-note").show();
    $(this).parent().parent().find(".result-note .out-    container").html(ajax_reply_load).fadeIn(300).load(postReplyUrl, {
        mID: mIDValue,
        access: accessValue,
        comment: commentValue,
    });
    $(this).parent().hide();
 });

}

function refreshFeed() {
    $.ajaxSetup({
        cache: false
    });
    $("#feeds div").remove();
    $(".submit-reply").remove();
    var loadingFeeds = "<div class='loading-feed'><img src='img/scanningsmall.gif' alt='loading...' /><p>Loading...</p></div>"
    var feedURL = "pbsc.htm"
    var feedParameter = "clientId=<%=clientId%>&getPostTweets=1&rescan=1";
    $("#feeds").html(loadingFeeds).load(feedURL, feedParameter,BindClick);
}

In the first part of your code, try:

$(".submit-reply").live('click', function(e) {
  e.preventDefault();
  // rest of your code here 
});

passing in "e" and calling e.preventDefault() will prevent any other HTML from running (if for example .submit-reply is set to submit a form).