CODEWITHSUNDEEP
jqueryhtml
maudulus
maudulus

Reputation: 11035

Remove first set of double br only, convert other double br to single br

I have html that is being pulled in from an external source. The problem is that I want to target double br with jQuery, so that I can remove the first double br entirely and convert all of the rest of the double br to single br.

The html looks like the following:

<div class="bottom-paragraph-drop">
    <br>
    <br>
    is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    <br>
    <br>
    is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

jQuery:

Not sure what to do; something along the lines of

$('.bottom-paragraph-drop br').next('br').remove()

Upvotes: 0

Views: 33

Answers (3)

strah
strah

Reputation: 6732

You could use RegularExpression to target these br elements:

var div = document.querySelector('.bottom-paragraph-drop');
var text = div.innerHTML;
var result = text.replace(/^\s*<br>\s*<br>/, "").replace(/<br>\s*<br>/g, "<br>");
div.innerHTML = result;
<div class="bottom-paragraph-drop">
    <br>
    <br>
    is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    <br>
    <br>
    is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    <br>
    <br>
    is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    <br>
    <br>
    is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

Or, if you want to target also 'self closed' tags your regexp could look like that:

/<br\s*\/*>\s*<br\s*\/*>/

Upvotes: 0

devlin carnate
devlin carnate

Reputation: 8602

Given the following HTML:

<input type="button" id="myBtn" value="Do It">
<div class="bottom-paragraph-drop">
  <br />
  <br /> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.is simply dummy
  text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.is simply dummy text of the printing
  and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
  <br />
  <br /> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

You can eliminate the second break tag by iterating over the break tags in the div and testing if the next element is a break (and then remove the element):

$('#myBtn').click(function() {
  $('div br').each(function() {
    if ($(this).next().is('br')) {
      $(this).next().remove();
    }
  });
});

Here is a Fiddle Demo.

Upvotes: 1

Zeokav
Zeokav

Reputation: 1703

You could loop through all the br elements and remove the first two, and then brs that are alternating in index as such -

function test() {
  $('br')[0].remove();
  $('br')[1].remove();
  for(var i = 2; i<$('br').length; i+=2) {
    $('br')[i].remove();
  }
}

That should do it.

Upvotes: 0

Related Questions