CODEWITHSUNDEEP
jquery
beginner
beginner

Reputation: 2508

Why hide() is behaving differently?

I want to remove the element by clicking on them(one by one). I almost done, but am experiencing a little problem.

I write this code, this work fine. But this works only for slide() and css(). These two example make effect only to the element on which I click.

$("#button").click(function(){
    var k = $("<p></p>").text("paragraph");
    $("#content").append(k);
});

$("#content").on("click","*",function(){
    $(this).slideToggle();
});

https://jsfiddle.net/k61Lb684/

https://jsfiddle.net/k61Lb684/1/

But the problem is I want to remove the element But when I try to remove() or hide() with same method, it only hides the bottom element.

https://jsfiddle.net/k61Lb684/2/

https://jsfiddle.net/k61Lb684/3/

Can someone Explain why this different behaviour for hide() and remove(). and a better solution for my problem?

Upvotes: 1

Views: 56

Answers (1)

eisbehr
eisbehr

Reputation: 12452

hide and remove workes the same way. But both don't have a animation time by default. So both are so fast, that it visible seems, that the last row would be removed. But the truth is, that the bottom elements slide up to the new empty space in the list.

You can see the correct behavior when giving hide a time for it's animation:

$(this).hide(500);

Working example.

Upvotes: 4

Related Questions