How can i get a value of parent div except children tag

Question

<bdi>
   <span class="woocommerce-Price-amount amount">$</span>
"75.47"
</bdi>

Now i want to access bdi value that is 74.47 only, how can i fetch it by using jquery. Here is my jquery Code.

jQuery(document).ready(function($){
    $('.qty').on('change',function(){
         // grab the price
         var price = $('bdi').children().not('span').html();
         var total_price = price * this.value;
         console.log(price, this.value, total_price);
    });
})

Answer 1

You need to .text() method to grab the bdi only and then use .replace to remove the dollar sign $ as well the double quotes "".

Also, to remove the extra space we need to .trim() - In order to use maths we need convert the string to integar using parseInt methof to do the multiplication and then get the total value in the console.log

Live Demo: (Full working code)

jQuery(document).ready(function($) {
  $('.qty').on('change', function() {
    // grab the price
    var price = $('bdi').text().replace("$", "").replace(/\"/g, "").trim() //75.47
    var total_price = parseInt(price) * parseInt($(this).val());
    console.log(total_price); //some results after selecting the product
    console.log(price ); //75.47
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="qty">
  <option disabled selected>Choose</option>
  <option value="25">Some Value 25</option>
  <option value="75">Some Value 75</option>
</select>

<bdi>
  <span class="woocommerce-Price-amount amount">$</span>
  "75.47"
</bdi>

Using parseFloat Method to make sure the total in in decimals 100.9 for 2 qty

Live Demo:

jQuery(document).ready(function($) {
  $('.qty').on('change', function() {
    // grab the price
    var price = $('bdi').text().replace("$", "").replace(/\"/g, "").trim() //75.47
    var total_price = parseFloat(price) * parseFloat($(this).val());
    console.log(total_price); //some results after selecting the product
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="qty">
  <option disabled selected>Choose</option>
  <option value="2">Qty 2</option>
  <option value="5">Qty 5</option>
</select>

<bdi>
  <span class="woocommerce-Price-amount amount">$</span>
  "50.45"
</bdi>