Question

Hello I am using jquery to do some ajax that calls in some data from a database, on the mouseover and element the method runs and I get the expected results, however when I then mouse over another element, the method runs again, however I need to delete the first lot of data from the screen first, this is what I have so far,

$("a.contentlink").mouseover(function(){
        var url = $(this).attr("href");
        $.ajax ({
            url: url,
            type: "POST",
            success : function (html) {
                $('#abstract').append(html);
            }
        });
    });

Can anyone help?

Answer 1

You need to call the empty method first, which removes all children from the matched elements.

For example:

$('#abstract').empty();

Alternatively, you can call the html function, which replaces the contents of the matched element with a string of HTML.

For example:

$('#abstract').html(html);