Question

I need to remove the 2nd and 3rd <br> elements in the parent <address> element such that the City and StateCode are on the same line. Here is the exact code:

<address>
    <label>3651 Stardust Drive</label>
    <br>
    <label>Hannibal</label>
    <br>
    <label>MO</label>
    <br>
    <label>63401</label>
</address>

I need to modify the HTML such that it reads as follows:

3651 Stardust Drive
Hannibal, MO
63401

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.

I initially tried removing all the line breaks but I need to keep the first line break and keep the others….

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

Answer 1

EDIT:

I need to remove the 2nd and 3rd `br` elements in the parent `address` element

You need to clarify this, as your example of what you want has the zipcode on a separate line. I took you literally, so my answer addresses the initial question you posed.

First, you would need to select the br elements correctly if you were going to directly select them:

$('br')

Instead, you wanted to remove all br elements except the first from the address element.

So, start from the address element and remove all of the br tags not equal to the first (element 0 within the list).

$('address').find('br:not(:eq(0))').remove();

See the jsfiddle

If you need the comma added to the city label, that’s as easy as selecting the appropriate label and then appending it, like so.

If you need the comma added after the city label, that’s as easy as selecting the appropriate label and then adding it after, like so. Which you pick depends on what else you’re doing.