Removing DOM element using jQuery
<p>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.</p>

<p>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.</p>

<p>Adding the DOM element:</p>

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

<p>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:</p>

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