Question

I have the following code:

$(document).ready(function(){

            $(".uiCloseButton").click(function(e)
            {
                e.preventDefault();
                var element = $(this).parents('.uiOverlay');
                alert(element);
                element.fadeOut(200,
                    function()
                    {
                        alert(element);
                        element.remove();
                    });
            });

        });

The idea is that when the close button is clicked it will remove it’s highest parent using the parents() method. I have been alerting the variable element to check its value and it always returns as [object Object] when surely it should contain the parent element?

However it does still fade the element so it’s working BUT doesn’t remove the element from the DOM so it’s only half working…

Any ideas why it’s not removing the element and why the element var is empty?

Thanks

Answer 1

Use console.log instead. Also you were getting the parents again before removeing, you can just do $(this).remove().

     $(document).ready(function(){
        $(".uiCloseButton").click(function(e)
        {
            e.preventDefault();
            var element = $(this).parents('.uiOverlay');
            console.log(element);
            element.fadeOut(200,
                function()
                {
                    console.log( $(this) ); 
                    $(this).remove();
                });
        });

    });