Add and Remove html based on condition
<p>I have the following input:</p>

<pre><code>&lt;input type="text" name="country" /&gt;
</code></pre>

<p>When a variable <code>error</code> <strong>is not null</strong> I will show the message after it:</p>

<pre><code>&lt;input type="text" name="country" /&gt;
&lt;span class="error"&gt;Some error message&lt;/span&gt;
</code></pre>

<p>When the variable <code>error</code> <strong>is null</strong> I need to remove the message.</p>

<p>So I have the following, being <code>element</code> the <em>input</em> tag:</p>

<pre><code>if (error != null) {
  var message = element.next("span.error");
  if (message == null)
    element.after("&lt;span class='error'&gt;" + error + "&lt;/span&gt;");
  else
    error.text(error);
} else {
  element.next("span.error").remove();
}
</code></pre>

<p>However, the message is never added when error is not null. </p>

<p>What am I missing? And is there a way to improve my code?</p>