Question

I have a custom error script that displays custom error messages on a page if a user tries to submit a form and it fails validation.

On the focusout of the input element (the input that failed validation) I am trying to remove the DOM element I added, but its removing all of the DOM elements with the class name I specify that exist on the page.

Adding the DOM element:

$('#' + el).closest('tr').addClass('pink_bg');
var error_txt = $('#' + el).attr('rel');
$('#' + el).before('<span class="registration_error_message">' + error_txt + '</span>');

Attempting to remove the DOM element (this removes all of the DOM elements of class=”registration_error_message”), all I want to do is remove one of the elements:

$("#" + el).focusout(function(){
    $(this).parent().remove('[class^=registration_error_message]');
    $(this).closest('tr').removeClass('pink_bg red_border');
});

Answer 1

Since you’re adding the .registration_error_message element before the el element using jQuery’s .before() method, it would seem that you want to use .prev() instead of using .parent() when removing.

$(this).prev().remove('[class^=registration_error_message]');

Or

$(this).prev('[class^=registration_error_message]').remove();