jQuery .remove（）不会删除元素

Question

I'm trying to dynamically remove li elements from an HTML page, I'm using the .remove() method but, if I inspect the HTML page I can see that the element is NOT removed, it has simply changed his visibility to display: none; . Is there a way I can DEFINITIVELY remove the element from the page?

this is the snippet (I clone a li from #ul1 and append it to #ul2 ):

var oggettoClone = $(this).clone();
oggettoClone.appendTo("#ul2");

$(oggettoClone).bind({
    click: function(o) {

        var r = confirm("Remove this element?");
        if (r == true) 
        {
            $(this).slideUp();

            setTimeout(function(){
                $(this).remove();
            }, 2000);
        }

    }
});

Answer 1

Use the "complete" callback function of slideUp ( http://api.jquery.com/slideup/ )

$(this).slideUp(function(){
    // this part will execute when slideUp is complete.
    $(this).remove();
});

Answer 2

The reason this doesn't work is because you are calling $(this) inside the setTimeout sub-function. You need to define the element as a variable to access it inside a sub-function.

$(oggettoClone).bind({
    click: function(o) {
        var r = confirm("Remove this element?");
        var t = $(this);
        if (r == true) {
            $(t).slideUp();
            setTimeout(function(){
                $(t).remove();
            }, 2000);
        }

    }
});

or follow andi's advice and use .sideUp() 's callback option:

$(oggettoClone).bind({
    click: function(o) {
        var r = confirm("Remove this element?");
        if (r == true) {
            $(this).slideUp(function(){
                $(this).remove();
            });
        }
    }
});