Как удалить элемент из после()

Question

У меня есть эти элементы html.

<input type='text' class='req-in' name='fname'> 
<input type='text' class='req-in' name='lname'> 

и у меня есть этот скрипт ..

$('.req-in').blur(function() { 
    if($(this).val() == ''){ 
     $(this).after('<p class="display">some text here for this field only!</p>'); 
    }else{ 
     // I'm trying to remove the "p.display" for this only! 
    } 
}); 

Я пытался $('.display').remove(); но все p.display были удалены, как я могу справиться с этим, что для этого только поле, которое p.display будет удалить?

Answer 1

Вы можете использовать .next() метод:

$(this).next('.display').remove(); 

Вы можете также проверить наличие следующего собрата перед повторным добавляющим сообщения:

var message = '<p class="display">some text here for this field only!</p>'; 

$('.req-in').blur(function() { 
    var $this = $(this); 
    if ($.trim(this.value) === '') { 
     // if the next '.display' sibling doesn't exist 
     if ($this.next('.display').length === 0) { 
      $this.after(message); 
     } 
    } else { 
     $this.next('.display').remove(); 
    } 
});