jquery fails to make a div empty

See more:

Ajax

jQuery

In my asp.net mvc 4 application, i am loading a partial view in current page. The code successfully loads the desired partial view in

<div id="PartialContent"></div>

on the current page. But, before sending jquery ajax request to the server, i am trying to clear the div. But the div is not clearing.

The old content is still there until the new content arrives. Here is my code-

$(document).ready(function () {
    $(".mainnav a").click(function (e) {
        e.preventDefault();
        var url = $(this).attr('href');
        if (url != '#') {
            $('#PartialContent').empty(); //not working
            $('#PartialContent').html(''); //not working
            $('div#PartialContent').children().remove(); //not working
            $.get(url, function (response) {
                $('#PartialContent').html(response);
            });
        }
    });
});

any idea?