Home > Mobile >  How to remove <br> using jquery
How to remove <br> using jquery

Time:11-18

This is my html

<div class="ch-list">
   <p><a>Ch 1</a><br><a>Ch 2</a></p>
   <br>
   <p><a>Ch 3</a><br><a >Ch 4</a></p>
</div>
<div class="pg-list">
   <p><a>pg 1</a><br><a>pg 2</a></p>
   <br>
   <p><a>pg 3</a><br><a>pg 4</a></p>
</div>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

If I do the following

$("p,.ch-list").children('br').remove();
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

it remove all < br > It become like this

<div class="ch-list">
   <p><a>Ch 1</a><a>Ch 2</a></p>
   <p><a>Ch 3</a><a>Ch 4</a></p>
</div>
<div class="pg-list">
   <p><a>pg 1</a><a>pg 2</a></p>
   <p><a>pg 3</a><a>pg 4</a></p>
</div>
<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

i don't know how to only remove < br > between < a > in class=ch-list not include other < br > between < p > or < br > from other class i want to make something like this

<div class="ch-list">
   <p><a>Ch 1</a><a>Ch 2</a></p>
   <br>
   <p><a>Ch 3</a><a>Ch 4</a></p>
</div>
<div class="pg-list">
   <p><a>pg 1</a><br><a>pg 2</a></p>
   <br>
   <p><a>pg 3</a><br><a>pg 4</a></p>
</div>
<iframe name="sif4" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Please tell me how to do Sorry for my bad english

CodePudding user response:

You could do it like this, since you say you want to remove <br> that is between 2 x <a>:

$('.ch-list p br').filter(function() {
  if ($(this).prev().is("a") && $(this).next().is("a")) {
    return this
  }
}).remove()

Demo

Show code snippet

$('.ch-list p br').filter(function() {
  if ($(this).prev().is("a") && $(this).next().is("a")) {
    return this
  }
}).remove()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ch-list">
  <p><a>Ch 1</a><br><a>Ch 2</a></p>
  <br>
  <p><a>Ch 3</a><br><a>Ch 4</a></p>
</div>
<div class="pg-list">
  <p><a>pg 1</a><br><a>pg 2</a></p>
  <br>
  <p><a>pg 3</a><br><a>pg 4</a></p>
</div>
<iframe name="sif5" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response:

$(".ch-list p").children('br').remove();
  • Related