如何从after（）中删除元素

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();
    }
});