How to select the last item in a container set?

Question

I have several containers on my page that have trailing <br> I want to delete. The containers are in the same class, but I am having problems with the ": last" selector (if that's what I should use).

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 to remove the last <br> from containers from the container side? I tried below, but this did not work:

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

Answer 1

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

selector > should make sure that you do not remove <br> tags inside the <p>

Answer 2

This should do the trick:

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

Answer 3

 $(".side-section br:last").filter(function() { return $(this).css("display") == "none" });