Question: I have list of html nodes (divs, with float left)

```
 1, 2, 3, 4, 5, 6, 7

```

I want to remove a node say 4, all the nodes after 4, i.e. here 5,6,7 should move left slowly. 

Is there any way I can do this? 

PS: I have only jquery in the project as long as possible I want to keep that way without including much libraries.

Answer: 
You can do it like this:

**HTML:**

```
    <div id="1">1</div>
    <div id="2">2</div>
    <div id="3">3</div>
    <div id="4">4</div>
    <div id="5">5</div>
    <div id="6">6</div>

```

**Jquery:**

```
$( "div" ).click(function() {
  $( this ).hide( 2000, function() {
    $( this ).remove();
  });
});

```

And **CSS:**

```
div {
background: green;
width: 30px;
height: 40px;
margin: 2px;
float: left;
color:white
}

```

[**DEMO**](http://jsfiddle.net/pawankullu/ppj9sjb0/)
I just create some sample with jQuery's animate API.

Following sample may be help you.

[**DEMO**](http://jsfiddle.net/jckim0414/6gfdukdq/)

Anybody help me fsfiddle link

html

```
<p><button id="go">Run »</button></p>
    <div class="block">1</div>
    <div class="block">2</div>
    <div class="block">3</div>
    <div class="block">4</div>
    <div class="block">5</div>
    <div class="block">6</div>
    <div class="block">7</div>

```

css

```
div {
    position: relative;
    background-color: #abc;
    width: 40px;
    height: 40px;
    float: left;
    margin: 5px;
}

```

js

```
$( "#go" ).click(function() {
    $( ".block:nth(3)" ).css("visibility","hidden");
    $( ".block:nth(3)" ).animate({
        left: -50
    }, {
        duration: 1000,
        step: function( now, fx ){
            $( ".block:gt(3)" ).css( "left", now );
        }
    }); 
});

```