Removing the final BR elements from a div using jQuery

Question

Removing the final BR elements from a div using jQuery

Does anyone know how to remove only the last <BR> tag within a div using jQuery? The code I tried ends up removing all <BR> tags in the div instead of just the last one.

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:last').remove();
});

javascript jquery html css

Answer 1

Answer №1

Here's a potential solution:

// Locate the last <br /> element:
$('br:last-child')
// Find all previous-sibling elements until reaching one that is not a <br /> element:
.prevUntil(':not(br)')
// Include the initial selector in the collection again:
.addBack()
// Filter the collection:
.filter(function() {
  var sibling = this.previousSibling;
  // Keep 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) equals 0:
  return sibling.nodeType === 3 && sibling.nodeValue.trim().length === 0;
// Remove these 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:

Answer 2

Here's a potential solution:

// Locate the last <br /> element:
$('br:last-child')
// Find all previous-sibling elements until reaching one that is not a <br /> element:
.prevUntil(':not(br)')
// Include the initial selector in the collection again:
.addBack()
// Filter the collection:
.filter(function() {
  var sibling = this.previousSibling;
  // Keep 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) equals 0:
  return sibling.nodeType === 3 && sibling.nodeValue.trim().length === 0;
// Remove these 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:

Answer 3

Answer №2

Although this may not be the exact solution you were looking for, I assume you want to eliminate unnecessary visual breaks. In that case, a more efficient approach would be using CSS:

br + br{display:none;}

By doing this, only the first break will act as intended while the rest of its siblings will be hidden.

Answer 4

Although this may not be the exact solution you were looking for, I assume you want to eliminate unnecessary visual breaks. In that case, a more efficient approach would be using CSS:

br + br{display:none;}

By doing this, only the first break will act as intended while the rest of its siblings will be hidden.

Answer 5

Answer №3

I haven't personally tested this method, but it seems like it could be effective:

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

Check out the documentation for more information: http://api.jquery.com/last-child-selector/

Answer 6

I haven't personally tested this method, but it seems like it could be effective:

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

Check out the documentation for more information: http://api.jquery.com/last-child-selector/

Answer 7

Answer №4

$(function(){
  $('.category').find('br:last').remove();
});

The :last selector is used to select the last matched element within a set of elements.

Answer 8

$(function(){
  $('.category').find('br:last').remove();
});

The :last selector is used to select the last matched element within a set of elements.

Answer 9

Answer №5

Using the code $('br').remove(); you can see a demonstration here: jsfiddle example

Answer 10

Using the code $('br').remove(); you can see a demonstration here: jsfiddle example

Answer 11

Answer №6

Success with this solution:

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

The above code snippet effectively deletes the final br element within a custom tag.

Please bear in mind that I implemented Jquery version 3.1.1 for this solution to work as intended.

Answer 12

Success with this solution:

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

The above code snippet effectively deletes the final br element within a custom tag.

Please bear in mind that I implemented Jquery version 3.1.1 for this solution to work as intended.

Removing the final BR elements from a div using jQuery

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

"Hey, getting an error stating 'require is not defined' while attempting to configure the .env file. Need some help here

Send information to MongoDB following a GET request in Node.js

Tips for utilizing jQuery to display images similar to videos

The result obtained from response.download() is saved as a blob that may contain undefined elements

Does defining the width and height of images go against the principles of material design?

Fade in elements individually with the jQuery Waypoints plugin

Set up Node.js application to allow CORS for designated endpoint(s) exclusively

The xhr.upload event listener is triggered when the xhr.responseText is empty after loading

What could be causing the strange output from my filtered Object.values() function?

Is there a way for me to write on a website and have my content instantly show up on a different hosting

Steps for creating interconnected datepickers in jQuery with month and year selection:To create a dependent datepicker with month and year selection using

The Bootstrap CSS styles seem to be malfunctioning following the upgrade from Angular 4 to Angular 5

Personalize the Button Color of the Ocean Blue template in Azure AD B2C

The header template may sometimes fail to load the CSS file

Bundle Thirdparty Dependencies with Webpack

What is the best way to include an array in an object while only retaining a single column for each element in the array?

Utilize Vue.js to incorporate an external JavaScript file into your project

The jQuery script operates just one time

Cannot adjust dimensions of Chart.js

Custom-fitting column widths in Bootstrap 5