jQuery Вставка, затем выцветать, а затем удалить

Question

Я проверяю форму, и если есть проблемы, я добавляю сообщение сразу после ввода с проблемой &, после чего исчезает через некоторое время. Дело в том, что я также хотел бы удалить это сообщение из DOM.

Я немного искал Google, и мне кажется, что я должен использовать fadeout(function(){}) или очередь. Ну, это было бы нормально в другом случае, но поскольку я вставляю его и удаляю с той же строкой, это немного сложнее. Есть ли еще один простой способ «одной линии»?

Я попытался добавить еще одну (более длинную задержку), но это не работает вообще.

$("<div style='color: red'>Maximum length is "+$(this).attr('maxlength')+" characters!</div>").insertAfter($(this)).delay(5000).fadeOut().delay(5010).remove(); 

Я не могу также реально использовать идентификаторы, так как он может выбросить несколько из них одновременно или пользователь может просто Quicky исправить один вход и нажмите на кнопку отправить, и было бы удалить старое и новое сообщение в то же самое время.

Спасибо.

Ps .: Только способ сделать это Я могу думать, что генерирует случайный идентификатор для каждого элемента и использует этот идентификатор, чтобы удалить его, но это просто слишком сложное ИМХО.

Для уточнения: эта строка находится внутри цикла, который проходит через каждый вход и текстовую область в форме, и они просто просты, если проверяются только минимальная длина, максимальная длина и числа. Вот почему я не могу поставить там статический идентификатор/класс, он не будет работать так, как я его хочу (удаляйте ТОЛЬКО этот добавленный элемент, ни один другой, даже если бы такое же сообщение было добавлено снова, когда пользователь снова отправил форму и т. Д.), , Спасибо.

Answer 1

Каждое сообщение об ошибке связано с полем, которое я думаю, поэтому вы можете назначить Id для каждого сообщения об ошибке без каких-либо проблем. Поэтому этот код может быть полезен:

$("<div style='color: red' id="FieldName_error">Maximum length is "+$(this).attr('maxlength')+" characters!</div>").insertAfter($(this)); 

//This function executes after 2 seconds. 
setTimeout(function(){ 
    $("#FieldName_error").fadeOut("slow", function(){ 
     $(this).remove(); 
    }) 
}, 2000)