How to select last element within a set of containers?

Question

I have several containers on my page that have a trailing <br> I want to remove. The containers are in the same class, but I am having trouble with the ":last" selector (if that is what I should be using).

Here is my HTML:

<div class="side-section">
    <p>Something 1</p>
    <br>
</div>
<div class="side-section">
    <p>Something 2</p>
    <br>
</div>
<div class="side-section">
    <p>Something 3 <br> Test 3</p>
    <br>
</div>

How do I remove the last <br> from .side-section containers? I tried the below but it did not work:

$(".side-section br").filter(":last").remove();
$(".side-section").filter("br:last").remove();

Answer 1

$(".side-section > br:last-child").remove();

the > selector is there to make sure you dont remove <br> tags inside the <p> tag

Answer 2

This should do the trick:

$(".side-section > br:last-child").remove();