Removing a specific element from a class

Question

I have this code, it moves every element in the class "block" 10 pixels to the left. I want it to remove any of the elements which are left of 300 pixels. Why does $(this).remove() not work and what can I do to fix this?

    $(".block").animate({left:"-=10"},speed,"linear",function(){

        if(parseInt(this.style.left) < 300)
        {
            $(this).remove();
            //something
        }else{
            //something
        }
    });

html:

    <div id="container">
       <span class="block"></span>
       <span class="block"></span>
    </div>

Here's all of my code http://jsbin.com/ExET/1/

Answer 1

Like this? jsFiddle

$('div').on('mouseover', function() {
    $(this).animate({ 
        left: '+=10' 
    }, 200, 'linear', function() {
        if($(this).offset().left > 50) {
            $(this).remove();
        } else {
            $(this).css('background', 'blue');
        }   
    });
});

You will need to change the values but it achieves the effect you desire.

Answer 2

This is what you want: http://jsbin.com/olipOh/4/watch?html,css,js,output

You need to select child elements:

$(".block").find("*")