How to remove last BR elements in a div with jQuery

Question

I want to remove the last <BR> s in a div with jQuery. I tried this code but it removes the line break tags at the first and the middle too.

HTML Code

<div class="topic">
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.<br/>
 Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes,<br/> 
 nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. 
 Nulla consequat massa quis enim. DonecLorem ipsum dolor sit amet, consectetuer adipiscing elit.<br/>
 <br/>
 <br/>
 <br/>
</div>

jQuery Code

$(document).ready(function(){
  $('.topic').find('br').remove();
});

Answer 1

One possible approach:

// selecting the <br /> element that is a last-child:
$('br:last-child')
// selecting all previous-sibling elements until we find one that is not a <br /> element:
.prevUntil(':not(br)')
// adding the initial selector back to the collection:
.addBack()
// filtering the collection:
.filter(function() {
  var sibling = this.previousSibling;
  // keeping only those <br /> elements with a previous-sibling of nodeType === 3
  // (a textNode), and those whose previous-sibling's nodeValue (with leading
  // and trailing white-space removed) is equal to 0:
  return sibling.nodeType === 3 && sibling.nodeValue.trim().length === 0;
// removing those elements:
}).remove();

 $('br:last-child').prevUntil(':not(br)').addBack().filter(function() { var sibling = this.previousSibling; return sibling.nodeType === 3 && sibling.nodeValue.trim().length === 0; }).remove(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="topic"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. <br />Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, <br />nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. DonecLorem ipsum dolor sit amet, consectetuer adipiscing elit. <br/> <br/> <br/> <br/> </div> 

References:

• :not() selector .
• addBack() .
• prevUntil() .

Answer 2

I'm aware this isn't what you asked, but I imagine you are trying to remove extra visual breaks. If so, it's less impactful to just do it with css:

br + br{display:none;}

This will leave just the first break functioning as a break, while all it's siblings are hidden.

Answer 3

I've never used it, but this should work:

$(document).ready(function() {
    $('.topic').find('br:last-child').remove();
}

Docs: http://api.jquery.com/last-child-selector/

Answer 4

$(document).ready(function(){
  $('.topic').find('br:last').remove();
});

Using the :last selector, it will take the last matched element.

Answer 5

with $('br').remove(); look the example: jsfiddle

Answer 6

This worked for me:

$('#customID br:last-child').remove();

This remove the last br tag from custom tag.

Note: I have used Jquery version 3.1.1