jQuery 2 error messages being returned but only need 1 to display

Question

Ok I have 2 error messages being return which in turn displays 2 messages of the same thing. how can I only show one message?

jQuery.noConflict();

   jQuery(document).ready(function(){
      if (jQuery("span.errorMessage").length > 0) {                                                              
         var $this = jQuery("span.errorMessage");
         var t = $this.text();

         // Clear the text
         $this.text('');

         // Add new message
         $this.text('No search criteria was specified.');

         // Change the layout
         jQuery('#errorMessage').appendTo(jQuery('#message_display'));
      }
   });

Adding the HTML for the error's

<span id="errorMessage">    
         <ul>
     <li><span class="errorMessage">No search criteria was specified.</span></li>
     <li><span class="errorMessage">No search criteria was specified.</span></li>
    </ul>
</span>

Answer 1

It appears that you are appending the text to #errormessage, but clearing out #this.text(). I'm guessing that you are needing to clear the #errormessage before adding new errors to it.

Try This....

<div id="errorMessage">    
    <ul>
        <li><span class="errorMessage">1 No search criteria was specified.</span></li>
        <li><span class="errorMessage">2 No search criteria was specified.</span></li>
        <li><span class="errorMessage">3 No search criteria was specified.</span></li>
        <li><span class="errorMessage">4 No search criteria was specified.</span></li>
    </ul>
</div>

$(document).ready(function() {
    SetupMessageManager();
    $('.errorMessage').parent().hide();
    $('.errorMessage:first').parent().show();
});