Extract the <br /> tag exclusively from the content inside the div

My experience with WooCommerce has led me to the need to include 

    <br>

within a product name.

However, this break appears differently as 

    <br />

in the .woocommerce-breadcrumb element.

This is what the breadcrumb currently displays:

    <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>

In the browser, the last line before the nav shows the break as < br / > literally.

Currently, I am attempting a solution to remove it, but it interferes with the breadcrumb's functionality!

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

Any suggestions or advice would be greatly appreciated!

Thank you!

jqueryhtmlcsswordpresswoocommerce

Answer №1

text function is considered to be destructive because it resets the content of the element where it is applied. One way to work around this is to iterate through the child nodes and modify the node values directly.

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

You can check out a working demo here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Maximize user experience: Eliminate the "#" in your URL by utilizing anchor tags for one-page navigation in

I've created a website with menu tabs including Home, About, Work, and Contact. To make navigation easier, I've used anchor tags for this one-page layout. However, I'm concerned about the URLs updating when clicking on the tabs. I prefer to ...

htmlcsswordpressmenuanchor

Issues with displaying errors in the delete confirmation box within Bootstrap 4

I am working on implementing a Bootstrap 4 modal confirmation before sending a delete request using JSON. Here is the code I have: $(document).ready(function() { $('.launchConfirm').on('click', function (e) { $('#confi ...

jqueryajaxbootstrap-4bootstrap-modal

Bootstrap allows you to create a responsive grid

I need assistance with making my bootstrap grid responsive for multiple input search filters on mobile devices. Currently, the layout is not showing correctly on mobile phones. On desktop, the output looks fine: https://i.stack.imgur.com/bKPUv.png Howev ...

htmlcssbootstrap-4

Arrange the items in the Navbar

Can someone please help me with a glitch I'm experiencing that is causing my Navbar items to not align properly? (See Navbar preview) I have attempted to fix it by adjusting the margin and padding manually, but my lack of Bootstrap knowledge has hin ...

htmlcssdjangobootstrap-4navbar

Position the label to the left of the form-switch using Bootstrap

I have been struggling to align the label to the left of my switchbox. Despite searching through stackoverflow and other websites, I haven't been successful in achieving the desired alignment. Here is a trimmed down version of the code for reference: ...

htmlcsscheckboxalignment

Attention: The index value is not defined:

This is the main page with a date picker that links to index.php, where the data table is located. Everything works fine when I select a date, but if I make any changes on the index.php page or try to access it directly, I encounter this error: Notice: ...

phphtmlsql

Utilizing jQuery to eliminate spaces and prevent special characters: a comprehensive guide

For my website's signup form, I need to enforce certain rules for the username: The username cannot contain any spaces. The username can only include a dot (.) as special character, similar to how Gmail handles usernames in their signup form. I am ...

javascriptjqueryregexvalidation

Container items in flexbox that surpass the defined width

Hello, I am facing an issue where my container is exceeding the maximum allowed width of my flex container (with justify space-between). Essentially, I have divided my 3 children into equal parts of 33.33%, but the total width exceeds the limit: Image: ...

cssreactjs

Concealing specific sections of HTML content in a webview on the fly

I've been experimenting with a proof of concept feature to implement the ability to conceal certain parts of a web page loaded in a webview, but I seem to be encountering some issues... Within a UIWebview extension, I have something similar to this c ...

javascriptioscssswift

Updating the division of a base template in Django without reloading it after a form submission action

I am looking to implement notifications in my base template, similar to the setup on the top left corner of Stack Overflow. I understand that this can be achieved by creating a custom template tag or a custom context processor. However, my specific requir ...

jqueryajaxdjango

Guide to adding a personalized HTTP header to ajax request using JavaScript or jQuery

Is there a way to create a custom HTTP header using JavaScript or jQuery? I've tried the code below but it's giving me an error of 405 Method not Allowed. I'm using the POST method, but in the request it shows as OPTION. The status code is ...

javascriptjqueryajax

Guide to removing selected value from a combobox in Angular

I am working on a simple HTML file that consists of one combobox and one clear button. I want the clear button to remove the selected value from the combobox when clicked. Below is my code: mat-card-content fxLayout="row wrap" fxLayoutAlign="left" fxLayou ...

javascripthtmlangulartypescript

Implementing Bootstrap in Wordpress using functions.php

The code snippet below is stored in my functions.php file within a Child theme directory. <?php function theme_styles() { wp_enqueue_style( 'bootstrap_css', get_template_directory_uri() . '/bootstrap.min.css' ); wp_enqueue_ ...

phpjquerycsswordpresstwitter-bootstrap

The showdown between AngularJS Directive Restrict A and E

In our small team, we are currently working on a project in AngularJS and striving to uphold basic standards and best practices. Since we are still relatively new to Angular, we have some questions regarding Directives, specifically the `restrict` options. ...

javascripthtmlangularjs

Placing two images within one div tag

I've been attempting to place two images within a single div, but they're not appearing how I intended. I'd like there to be some space between the images, but that's not happening. Here's the CSS I'm using: .sidebarBody { ...

htmlcssimage

Use a foreach loop to iterate over an array of dates and display them in individual tables

I am currently working on structuring my foreach loop to iterate through all the dates in my time stamp arrays. The goal is to display the results in 5 separate tables, each pertaining to one of the dates. Below is the function I've implemented to re ...

phphtml

What is the best way to extract information from an XML file using JQUERY and present it neatly in a table format

I am looking to populate a table with data from an XML file as shown below: <table> <th>Head 1</th><th>Head 2</th><th>Head 3</th> <tr><td></td><td></td><td></td></tr> ...

htmljquerycssxml

ReactJs: difficulty in resetting input field to empty string

I have an application using React v 0.13.1 (Old version). I am struggling to update my input field to "" after retrieving the updated value from the database. Scenario: I am updating the input fields by clicking on the button named "Pull&qu ...

javascripthtmlcssreactjs

Add a new to-do list item to the current list using jQuery

Currently, I am in the process of developing a todo list application using jQuery. However, I have encountered some issues and bugs that are causing challenges. Initially, my objective was to set the first element through HTML code, which is functioning as ...

htmljquery

Creating a stylish zebra pattern using JCrop on the cropping window

Lately, while using jquery jcrop, I've noticed a peculiar design appearing on the cropping window. The details of this pattern are unclear to me. What could be the reason behind the zebra-like pattern visible on the cropping window? Is there any spec ...

javascriptjqueryjcrop