GwtQuery - empty() Widget after fadeOut()

Out of my frustration in wrapping Bootstrap alert / notification libraries to GWT I've decided to make one using GwtQuery:

public static void showErrorNotification(String message){
    List<Widget> allNotifications = $(".notification").widgets();
    for (Widget w : allNotifications){
        $(w).fadeIn(1000);
        $(w).append("<div id=\"errorAlert\" class=\"rounded10 errorAlert\">" +
                "<img alt=\"\" src=\"public/images/exclamation.png\"> " +
                "You must accept the terms and conditions to finish your registration." +
                "</div>");
        $(w).fadeOut(5000);
        //$(w).empty();
    }
}

The problem with this code is that, this method may be called by a user many times, and thus the append'ed HTML will accumulate over time. empty'ing like in the commented line causes the notification to not even show up.

What could be the solution so that after it fades out, it will empty the notification panels?

Update:

When I put:

$(w).empty() before fadeIn() nothing shows on the second time this method is called.

You have to queue a function to remove the errorAlert when all animations have finished.

You should stop the queue each time you call your showErrorNotification method to avoid issues when it is called multiple times before it has finished.

And you have to remove the errorAlert before adding it to avoid being repeated in the case last notification was stopped before it was removed.

    $(w).stop(true, true);
    $(w).find(".errorAlert").remove();
    $(w).append("<div id=\"errorAlert\" class=\"rounded10 errorAlert\">" +
        "<img alt=\"\" src=\"public/images/exclamation.png\"> " +
        "You must accept the terms and conditions to finish your registration." +
        "</div>");
    $(w).fadeIn(1000);
    $(w).fadeOut(5000);
    $(w).queue(new Function(){
      public void f() {
        $(this).find(".errorAlert").remove();  
      }
    });