删除最后一个 div 而不是使用 jQuery 超时将它们全部删除

Question

I'm using AJAX to submit the form without reloading. I'm using it for my register form. After I catch my error/success message I append it to my div and remove it after 5 seconds using timeout function.

Now if the user clicks on the button and gets error, and then again clicks the button (before 5 seconds pass) the second error message div will appear with the same error but it will be removed at the same time the first one is removed. So what I'm trying to achieve is to set my error/success messages to have individual timeouts. So first error appears, then after 2 seconds I press the button again and get second error, now the first error will be removed after 5 seconds, and the second will stay untill its 5 seconds pass.

So I have a div in my HTML code with the id "msg-response", where my error/success messages appear. And here is how I call them:

$("#registerform").submit(function(event) {
    var ajaxRequest;
    event.preventDefault();
    $("#result").html('');
    var values = $(this).serialize();
       ajaxRequest = $.ajax({
            url: "include/auth/register.php",
            type: "post",
            data: values
        });
    ajaxRequest.done(function (response){
         if ($.trim(response) == 'error') {
            $("#msg-response").prepend("<div class='error-msg'>Email format isn't valid. Try again.</div>").hide().fadeIn("slow");
            setTimeout(function() {
                $('.error-msg').fadeOutAndRemove('slow');
            }, 5000);
         }
    });

    ajaxRequest.fail(function (){
        alert("error");
    });

});

So how can I add individual timeouts to each div appeared? And not one timeout for all divs with class .error-msg .

Thanks in advance.

Answer 1

You can store your .error-msg inside a var and then remove it by var reference:

var error = $("<div class='error-msg'>Email format isn't valid. Try again.</div>"); 
error.fadeOutAndRemove('slow');

Final code:

     if ($.trim(response) == 'error') {
        var error = $("<div class='error-msg'>Email format isn't valid. Try again.</div>");

        $("#msg-response").prepend(error).hide().fadeIn("slow");
        setTimeout(function() {
            error.fadeOutAndRemove('slow');
        }, 5000);
     }

Answer 2

Intresting, I got it working by making my error-msg div to be an ID instead of CLASS, so like this:

$("#registerform").submit(function(event) {
    var ajaxRequest;
    event.preventDefault();
    $("#result").html('');
    var values = $(this).serialize();
       ajaxRequest = $.ajax({
            url: "include/auth/register.php",
            type: "post",
            data: values
        });
    ajaxRequest.done(function (response){
         if ($.trim(response) == 'error') {
            $("#msg-response").prepend("<div id='error-msg'>Email format isn't valid. Try again.</div>").hide().fadeIn("slow"); // Changed line
            setTimeout(function() {
                $('#error-msg').fadeOutAndRemove('slow'); // Changed line
            }, 5000);
         }
    });

    ajaxRequest.fail(function (){
        alert("error");
    });

});

I'm confused a little, so can atleast someone write me explanation why its good now that I'm using ID and not while using classes? And is this the right approach?