CODEWITHSUNDEEP
jquery
Jacky
Jacky

Reputation: 11

Keep Removing last div

I need to remove last div and add a new div once I CLICK ON "Click here..." Check it at fiddle

$( document.body ).click(function() {
    $('#newsid div:last').fadeOut()
    $( "<div id='three'>test</div>" ).insertBefore( "#newsid div:first" ).fadeIn();
});

Thanks

Upvotes: 1

Views: 143

Answers (6)

caramba
caramba

Reputation: 22480

not sure if you mean something like this by saying "only once": http://jsfiddle.net/8FU7f/1/

var doOnce = true;
$( document.body ).click(function() {
    if(doOnce) {
        doOnce=false;
        $('#newsid div:last').fadeOut()
        $( "<div id='three'>test</div>" ).insertBefore( "#newsid div:first").fadeIn();
    }

});

Upvotes: 0

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

Use :visible selector then only use :last selector like this: demo

$( document.body ).click(function() {
    $('#newsid div:visible:last').fadeOut()
    $( "<div id='three'>test</div>" ).insertBefore( "#newsid div:first" ).fadeIn();
});

Upvotes: 0

timo
timo

Reputation: 2169

$( document.body ).click(function() {
$('#newsid div:last').fadeOut(300, function(){$(this).remove()});;
$( "<div id='three'>test</div>" ).insertBefore( "#newsid div:first" ).fadeIn();
});

Reasons are allready explained above. Fadeout does not remove it, I included the remove() code in a function after your fadeout.

Upvotes: 0

AndrewLakomski
AndrewLakomski

Reputation: 138

Simple as that:

$( document.body ).click(function() {
    $('#newsid div:last').fadeOut()
    $('#newsid div:last').remove()
    $( "<div id='three'>test</div>" ).insertBefore( "#newsid div:first" ).fadeIn();
});

The problem is, if you're using fadeOut(), there is always a div:last, but with "display:none" property.

Upvotes: 0

xpy
xpy

Reputation: 5621

You can add a callback function as a parameter in fadeout function:

    $('#newsid div:last').fadeOut(
      function(){
        this.remove();
      }
    );

Upvotes: 1

Gaucho_9
Gaucho_9

Reputation: 265

With fadeOut you don't remove the div, only make it hidden.

try changing 

$('#newsid div:last').fadeOut()

for

$('#newsid div:last').remove()

Upvotes: 0

Related Questions