javascript - Remove an appended element on dialog box close

Question

I use JQuery and Ajax to update my database. After each successful update, a png icon is displayed for 1 second. To be more specific, the update form is contained into a JQuery dialog box. The problem is that after updating, and closing the dialog box, the icon does not show again until I refresh the page. I believe that I have to unbind after closing dialog box but I couldn't know how. Below is my code

$(this).find('.mydialog').dialog({
width: 'auto',
height:'auto',
resizable: false,
buttons: function() {
        $(this).dialog("open");
    },
modal:true,
open: function() {
        $(this).find('.form1').on('submit', function() {
        var id = $(this).find('.ID').val(); 
        var name = $(this).find('.NAME').val(); 
        var dataString = 'id='+ id + '&name=' + name; 

        $.ajax({
            type: "POST",
            url: "../myfolder/update.php",
            data: dataString,
            success: function(){ // the displayed icon
            $('.info').append("<img src='../images/success.png' width='30px' height='35' />").delay(1000).fadeOut();
            }
        });
            return false;           
    });
},

close: function() {
       $(this).dialog("destroy"); // I tried this but it doesn't work!      
},
});

Thanks for help