Removing Breaks Before H1

Question

I have a page that is like this:

<div id="contBody">
    <br />
    <br />
    <!-- Maybe more, it's a variable number of <br /> that can appear -->
    <h1 id="header">Test</h1>
</div>

Since the number of <br /> before the <h1> varies I and I want to remove them programmatically, how I can do it using jQuery?

Answer 1

If you want to remove all of them before the h1 elements, do this:

$('br + h1').prevAll('br').remove();

Using the next-adjacent-selector ^[docs] , this will find all <h1> elements that are preceded by at least once <br> element.

Then it uses the prevAll() ^[docs] method to select the previous <br> elements, and the remove() ^[docs] method to remove them.

Answer 2

You can find them all with .prevAll() and .remove() them, like this:

$("#header").prevAll("br").remove();