How can I clear h:messages in an ace:dialog after an ajax event?

I have a button (Make Popup Visible) which makes a pop-up visible. When the form is submitted (Submit The Form), an error message can sometimes appear in the h:messages field, which is expected.

My problem is that, when I close the pop-up (Make Popup Invisible) and then re-open it (Make Popup Visible) the h:messages field is still populated with the old error message.

Is there a way I can clear the messages when the (Make Popup Visible) is pushed? I don't want to do a full page submit to do this.

Button visibility:

<h:form id="mainForm">
    <h:commandButton value="Make Popup Visible"> 
        <f:ajax listener="#{controller.prepareDelete(item)}" render=":deleteItemPopup"/>
    </h:commandButton>
</h:form>

Pop-up:

<ace:dialog id="deleteItemPopup" visible="#{controller.deleting}">
    <h:panelGroup rendered="#{controller.deleting}" layout="block">
        <h:messages for="deleteItemPopupForm"/>
        <h:form id="deleteItemPopupForm">                                

            <ui:insert name="content">
                This contains a form which, when submitted, can cause
                an error message to be created and populate the h:messages
                field
            </ui:insert>

            <h:commandButton value="Submit The Form" action="#{controller.delete}"/>
            <h:commandButton value="Make Popup Invisible">
                <f:ajax listener="#{controller.cancel}" render=":deleteItemPopup"/>
            </h:commandButton>

        </h:form>
    </h:panelGroup>
</ace:dialog>

Commands:

public void prepareDelete(Item item) {
    deleting = true;
}

public void cancel() {
    deleting = false;
}

public void delete() {
    .
    .
    .
    } catch (MyException ex) {
        FacesUtils.sendMessage("deleteItemPopupForm", ex);
    }

}