Jquery - how to add a message and clear the previous one?
<p>My webpage is as follows;</p>

<pre><code>&lt;%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage&lt;SHP.Models.AdditionalDepartmentsViewModel&gt;" %&gt;
&lt;%@ Import Namespace="SHP.Helpers" %&gt;

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

&lt;html xmlns="http://www.w3.org/1999/xhtml" &gt;
&lt;head runat="server"&gt;
    &lt;title&gt;Additional Departments&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;p&gt;For SHP &lt;%: Model.Employee.Forename %&gt; &lt;%: Model.Employee.Surname %&gt; has been assigned to 
        &lt;%: Model.Employee.BusinessUnit.BusinessUnitName %&gt;.&lt;/p&gt;
    &lt;p&gt;For MNet &lt;%: Model.Employee.Gender.GetThirdPersonSingularPronoun()%&gt; you can assign the Departments here as well.&lt;/p&gt;
    &lt;div id="TableBusinessUnits"&gt;
        &lt;div id="leftSide"&gt;
            &lt;table&gt;
                &lt;tr&gt;
                    &lt;th&gt;Departments&lt;/th&gt;
                    &lt;th&gt;&lt;/th&gt;
                &lt;/tr&gt;
                &lt;%: Html.EditorFor(model =&gt; model.Departments) %&gt;
            &lt;/table&gt;
        &lt;/div&gt;
        &lt;div id="rightSide" style="padding-right:50px;"&gt;
            &lt;table&gt;
                &lt;tr&gt;
                    &lt;th&gt;Divisions&lt;/th&gt;
                    &lt;th&gt;&lt;/th&gt;
                &lt;/tr&gt;
                &lt;%: Html.EditorFor(model =&gt; model.Divisions) %&gt;
            &lt;/table&gt;                        
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;script type="text/javascript"&gt;
    $(document).ready(function () {
        var elementId;
        $('tr input[type="checkbox"]').click(function () {
            elementId = $(this).attr('id');
            var url = $(this).attr('data-url');
            var employeeId = $(this).attr('data-employeeId');
            var businessUnitId = $(this).attr('data-businessUnitId');
            var selectedFlag = $(this).is(':checked');

            dataService.saveSelection(
            employeeId,
            businessUnitId,
            selectedFlag,
            elementId,
            SavedSetting,
            url
        );
        });
    });

    SavedSetting = function (data) {
        $(data.ElementId).after('&lt;span class="error"&gt;' + data.Message + '&lt;/span&gt;');
    };
&lt;/script&gt;
</code></pre>

<p>The EditorFor commands provide a loop for this Editor Template;</p>

<pre><code>&lt;tr&gt;
    &lt;td&gt;&lt;%: Model.BusinessUnit.BusinessUnitName %&gt;&lt;/td&gt;
    &lt;td&gt;
    &lt;%: Html.CheckBoxFor( 
            x =&gt; x.Selected,
            new RouteValueDictionary 
            { 
                { "data-url", Url.Action("AddBusinessUnitForEmployee", "DataService") }, 
                { "data-employeeId", Model.EmployeeId }, 
                { "data-businessUnitId", Model.BusinessUnit.BusinessUnitId } 
            } 

       ) %&gt; 

    &lt;/td&gt;
&lt;/tr&gt;
</code></pre>

<p>The final piece of JQuery above - </p>

<pre><code>SavedSetting = function (data) {
            $(data.ElementId).after('&lt;span class="error"&gt;' + data.Message + '&lt;/span&gt;');
        };
</code></pre>

<ul>
<li>puts a message after the checkbox in the table. What I would like to do is clear the previous message if it exists. How do I do that?</li>
</ul>
