Question

I’m making an image browser where you van edit the name of the image by clicking on the image itself. Then a tr would appear at the bottom of it with a form where you can change the image name. It all works fine, except for the slide animation.

First I check if there is a editRow already showing. If it is, it wil first slideUp and then be removed from the website. After that I append a new editRow for the clicked image. I had to have the slidedown animation. How do I let this work properly? Now the slideup works fine. It slides up and removes the editRow div. After that, nothing happens.

Also the div will only appear the first time.

$('.imgItem').click(function() {
        imgID = $(this).parent().find('div').attr('id').replace(/image/, '');;
        if($('.editRow').length){
            $('.editRow').slideUp(300, function(){
                $('.editRow').remove();
                $(this).parent().parent().parent().after('<tr class="editRow"><td class="editItem" colspan="4"></td></tr>');
                $('.editRow').hide();
                $('.editItem').load("ajax.editImage.php",{imgID:imgID});
                $('.editRow').slideDown().show();
            });         
        }else{
            $(this).parent().parent().parent().after('<tr class="editRow"><td class="editItem" colspan="4"></td></tr>');
            $('.editRow').hide();
            $('.editItem').load("ajax.editImage.php",{imgID:imgID});
            $('.editRow').slideDown().show();
        }
    });

Answer 1

That is because you are removing all elements with class editRow. I supect you need:

$('.editRow').slideUp(300, function(){
            ...
            $(this).remove();

Remove it last, because otherwise $(this).parent() refers to nothing, since this has been removed from the DOM.