Question

I have a div that I’m loading a slider into with the .load. For some reason once I’ve loaded the slider into the div I can’t clear it out. I’m trying to use the jquery empty() function but it won’t work. The js I’m using to load the slider in is:

$("#nav").click(function() {
    $("#info_header").empty();
    $("#content_1").empty();
    $("#content_2").empty();
    $("#content_3").empty();
    $("#images").empty();
    $("#load_container").switchClass("load_container_port", "load_container_slider", .01);
    $("#controls").switchClass("controls_port", "controls_slider", .01);
    $("#info").switchClass("info_port", "info_slider", .01);
    $("#load_container").css({
        height:($(window).width() * 500) /1000
    });
    $("#info").css({
        height:($(window).width() * 500) /1000
    });
    $("#top_section").css({
        height:(($(window).width() * 500) /1000) + 40
    });
    setTimeout(function() {
        $("#slider").delay(100).load("home_slider.html"); 
    }, .03);       
});

and then the js I’m using to try empty and load new content in is:

function portfolio_clear() {   
    $('#slider').empty(); 
    $("#images").empty();
    $("#load_container").switchClass("load_container_slider", "load_container_port", .01);
    $("#controls").switchClass("controls_slider", "controls_port", .01);
    $("#info").switchClass("info_slider", "info_port", .01);
}


$("#space").click(function() {

    $('#load_container').css({
        background: "#191919"
    });
    $('#close_white').css({
        display: "inline-block"
    });
    $('#close_black').css({
        display: "none"
    });
    $('#goto_white').css({
        display: "inline-block"
    });
    $('#goto_black').css({
        display: "none"
    });

    var id = $(this).attr('id');

    $("#info_header").load(id + "_header.txt");
    $("#content_1").load(id + "_1.txt");
    $("#content_2").load(id + "_2.txt");
    $("#content_3").load(id + "_3.txt");

    $("<img>", {
        src: "http://www.klossal.com/space.jpg"
    }).appendTo("#images");

    $('html, body').animate({
        scrollTop: 0
    }, 300);

    if (screen.width >= 1025) {
        $("#top_section").animate({
            height: 1112
        }, 300);
    }
    else {
        $("#top_section").animate({
            height: 926
        }, 300);
    }

});

the page can be viewed here:

“http://173.254.28.83/~klossalc/index_test.html”

you can load the slider by clicking klossal.com in the very upper left hand corner, and you can try to click on the first tile below to try to replace it, which won’t work. If you click on the tiles first they load fine, and then clicking klossal.com to load the slider also works, just not the other way around.

Answer 1

I would use this to clear an elements html:

$("#element_id").html('');

I cant see where you are calling portfolio_clear() from, if you want it to happen when you click your thumbnails try this:

$(".thumb").click(function() {
        portfolio_clear();
        $(".thumb_info").not(this).switchClass("info_color_3", "info_color_2", 300);
        $(this).find('.thumb_info').switchClass("info_color_2", "info_color_3", 300);
    });