Mikey Musch
Mikey Musch

Reputation: 609

remove only <br /> from div content

I am using WooCommerce and have had to include

    <br> 

in a product name.

This break now shows up as

    <br /> 

in the .woocommerce-breadcrumb.

this is what the breadcrumb looks like:

    <nav class="woocommerce-breadcrumb" itemprop="breadcrumb">
        <a href="http://localhost/WP">Home</a>
        &nbsp;&#47;&nbsp;
        <a href="http://localhost/WP/product-category/guitars/">Guitars</a>
        &nbsp;&#47;&nbsp;
        <a href="http://localhost/WP/product-category/guitars/electric-guitars/">Electric Guitars</a>
        &nbsp;&#47;&nbsp;
        <a href="http://localhost/WP/product-category/guitars/electric-guitars/fender-electric-guitar/">Fender-123-electric-guitar</a>
        &nbsp;&#47;&nbsp;Fender American Standard&lt;br /&gt; Stratocaster Sienna Sunburst
    </nav>

As you can see the last line before the nav contains the break which in the browser literally looks like < br / >

At the moment I am trying this to get rid of it, but it breaks the breadcrumb's functionality!

  $(function() {
      $( '.woocommerce-breadcrumb' ).text(function(_,txt) {
          return txt.split('<br />').shift();
      });
  });  

Any advice?

Thanks!

Upvotes: 1

Views: 144

Answers (1)

Ram
Ram

Reputation: 144709

text method is destructive, i.e. it resets content of the element. You could iterate through the childNodes and modify nodeValue of the textNodes.

$( '.woocommerce-breadcrumb' ).contents().each(function() {
    if ( this.nodeType === 3 ) {
       this.nodeValue = this.nodeValue.replace(/<br \/>/g, '');
    }
});

http://jsfiddle.net/zb8j43cu/

Upvotes: 1

Related Questions