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 modo 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();
});

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 modo 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();
});

• javascript
• jquery
• html
• css

• What should happen if there was a <div> between the last and penultimate <br/> elements? – David Thomas Commented Nov 21, 2014 at 22:16
• You want to deleted with an button? – Diego Cardenas Commented Nov 21, 2014 at 22:17
• are you generating this with PHP or similar? Why not trim the text before sending it to nl2br()? – MightyPork Commented Nov 21, 2014 at 22:17
• @MightyPork The code is generated with external resource that I don't have the ability to change it. – abdelghafour arabs Commented Nov 21, 2014 at 22:18
• @DiegoCardenas No I wan't to delete it automatically. – abdelghafour arabs Commented Nov 21, 2014 at 22:19

6 Answers 6

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="topic">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean modo 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().

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.

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

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

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

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

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

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

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