remove <br> with jquery

Question

I have the following markup which is just a small portion of the total markup.

<div align="center">
  <img src="v/vspfiles/templates/100/images/headings/heading_shoppingcart.gif">
</div>
<br><br>

I would like to remove the two <br> tags.

Note: there are other <br> tags on the page both before this and after this that I do not want to removed.

I thought of using a selector to target the div by the src which contains heading_shoppingcart.gif and something like .after and then .remove the <br>.

Unsure of the correct syntax or if there is a better/easier way to do it.

Answer 1

How about:

$("img[src$='heading_shoppingcart.gif']").parent().nextAll('br').remove()

• The [$=] is the 'attribute ends with' selector.
• .parent() moves up to the containing element
• .nextAll() gets all following siblings

Answer 2

$('[src~=images/headings/heading_shoppingcart.gif]').parent().nextAll('br').remove();

Answer 3

I think the following would work:

var br1 = $("img[src='v/vspfiles/templates/100/images/headings/heading_shoppingcart.gif']").parent("div").next("br");

br1.add(br1.next("br")).remove();

Answer 4

This will safely retain any subsequent <br> elements since you seemed to allude to the idea that there may be more that should be preserved.

$('img[src$=heading_shoppingcart.gif]').parent().nextUntil(':not(br)').remove();