Clean the previous elements after load replacement data with an ajax call

Question

I have a page and I am using ajax to load the data from a database. That data contains some html code and I put this code inside a div called #container. I have a paginator system, so if I click on "next" button, the ajax starts again and gets the html code as response, and then replaces this code with the previous code inside a #container.

I have code something like this:

function loading_show() {
    $('#loading').html("<img src='images/loading.gif'/>").fadeIn('fast');
}
function loading_hide() {
    $('#loading').fadeOut('fast');
}
function loadData(page) {
    loading_show();

    $.ajax({
        type: "POST",
        url: "load_data.php",
        data: "page=" + page,
        success: function(msg) {
            $("#container").ajaxComplete(function(event, request, settings) {
                loading_hide();
                $("#container").html(msg);
            });
        }
    });
}

The result of the ajax function is a HTML message. A part of this message is something like this:

<span id="one_15" class="textzero">8002379154 - JKLM REPRESENTACIONES Y CIA LTDA</span>

OO. So.. if I make the ajax call again I get another html like this:

<span id="one_16" class="textzero">EXAMPLE TEXT</span>

The problem is that, say if I want to do something with textzero class after loading before the textzero class preserv the previous ajax data like this:

texto2 = $('.textzero').text();

<span id="one_15" class="textzero">8002379154 - JKLM REPRESENTACIONES Y CIA LTDA</span>
<span id="one_16" class="textzero">EXAMPLE TEXT</span>

Question: Is there a way to clean the previous elements after load replacement data with an ajax call?

What does ` $("#container").ajaxComplete(...)` achieve? It appears to be unnecessary. — Beetroot-Beetroot, Apr 01 '13 at 12:33
And what do you mean by "clean the previous elements"? Could be interpreted in several ways, none of which makes any sense with regard to the rest of the question. — Beetroot-Beetroot, Apr 01 '13 at 12:42
Please check this http://stackoverflow.com/questions/11576618/remove-ajax-loaded-content-and-script — Parixit, Jul 18 '13 at 12:49

score 0 · Answer 1 · answered Apr 01 '13 at 12:30

0

You can call $("#container").empty() to remove all child nodes from that container.

answered Apr 01 '13 at 12:30

Piet van Dongen

1,629
10
13

Clean the previous elements after load replacement data with an ajax call

1 Answers1