I have this html elements.
<input type='text' class='req-in' name='fname'>
<input type='text' class='req-in' name='lname'>
and I have this script..
$('.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!
}
});
I tried to $('.display').remove(); but all the p.display were removed, how can I deal with it that for this only field that has p.display will be remove?
You can use the .next() method:
$(this).next('.display').remove();
You can also check the existence of the next sibling before re-appending the message:
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();
}
});
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments