Warum verhält sich hide() anders?

Question

Ich möchte das Element entfernen, indem Sie darauf klicken (eins nach dem anderen). Ich bin fast fertig, habe aber ein kleines Problem.

Ich schreibe diesen Code, diese Arbeit gut. Aber das funktioniert nur für slide() und css(). Diese beiden Beispiele wirken sich nur auf das Element aus, auf das ich klicke.

$("#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/

Aber das Problem ist, möchte ich das Element entfernen, aber wenn ich zu remove() oder hide() mit derselben Methode versuchen, es versteckt sich nur das untere Element.

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

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

Kann jemand erklären, warum dieses unterschiedliche Verhalten für hide() und remove(). und eine bessere Lösung für mein Problem?

Answer 1

hide und remove funktioniert auf die gleiche Weise. Aber beide haben standardmäßig keine animation Zeit. So sind beide so schnell, dass es sichtbar scheint, dass die letzte Reihe entfernt würde. Aber die Wahrheit ist, dass die unteren Elemente auf den neuen leeren Platz in der Liste geschoben werden.

Sie können das richtige Verhalten zu sehen, wenn hide eine Zeit, um es Animation ist:

$(this).hide(500); 

Working example.