jQuery Novice: how to remove certain child elements
<p>I need to remove the 2nd and 3rd <code>&lt;br&gt;</code> elements in the parent <code>&lt;address&gt;</code> element such that the <code>City</code> and <code>StateCode</code> are on the same line. Here is the exact code:</p>

<pre><code>&lt;address&gt;
    &lt;label&gt;3651 Stardust Drive&lt;/label&gt;
    &lt;br&gt;
    &lt;label&gt;Hannibal&lt;/label&gt;
    &lt;br&gt;
    &lt;label&gt;MO&lt;/label&gt;
    &lt;br&gt;
    &lt;label&gt;63401&lt;/label&gt;
&lt;/address&gt;
</code></pre>

<p>I need to modify the HTML such that it reads as follows:</p>

<pre><code>3651 Stardust Drive
Hannibal, MO
63401
</code></pre>

<p>The html I am having to work with is as it is because I am using jQuery Mobile with MVC. I know there are other ways to do this but would rather just write a jQuery function to fix it up for me.</p>

<p>I initially tried removing all the line breaks but I need to keep the first line break and keep the others....</p>

<pre><code>$(document).ready(function() {
     //pretty-up the address &amp; job descriptions
       $('&lt;br&gt;').remove();
 });
</code></pre>
