用js删除类

I display statements in HTML 2 depending on the situation. These are divas in the Bootstrap class: alert. This is a page without overloading. I would therefore like to see the old communication disappear after the new data has been sent. How to do it so that a class div alert disappears.

function forgotUsername() {
    $('.panel-body').removeClass('alert');
    var forgotUsernameDTO = {"email":$('#email').val()};
    $.ajax({
        type: 'PUT',
        url: '/forgotUsername',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        data: JSON.stringify(forgotUsernameDTO),
        success: function (result) {
            $('#forgotUsernameForm')
                .before('<div class="alert alert-dismissable alert-success">'
                        + '<span th:text="#{forgotUsername.success}">An e-mail has been successfully sent. Please allow a few minutes for it to get to your inbox!</span>'
                        + '</div>');
        },
        error: function (error) {
            $('#forgotUsernameForm')
                .before('<div class="alert alert-dismissable alert-danger">'
                        + '<span th:text="#{forgotUsername.error}">No username found associated with that e-mail!</span>'
                        + '</div>');
        }
    });
}

You're doing

$('.panel-body').removeClass('alert');

the $.removeClass() function will try to remove the class from the element, but it doesn't actually remove the element. I think you want

$('.alert').remove();    //selects all elements with the "alert" class, then removes them from the page