Question

I need to select the price from a div, but the problem is that sometimes there is an additional nested div and/or a span inside the element.

I am wondering if there is a way to use the :not selector, or if I have to get the value of the html and scrub out the span and div that is sometimes there.

$('.price').text();//returns the additional text from the span and div
$('.price').html();//returns the span and div tags and text

<!-- Simplified html -->
<div class="product">
<div class="price">$19.95
</div>
</div>

<!-- This product has shipping info inserted -->
<div class="product">
<div class="price"> $54.99
<div class="shipping-info">$5.99</div>
</div>
</div>

<!-- This product has the original price in a span and the shipping info inserted -->
<div class="product">
<div class="price"><span>$189.99</span>$99.99
<div class="shipping-info">Free Shipping</div>
</div>
</div>

I need to get the value of the price ($19.99, $54.99, $99.99), but not the extra span or shipping info.

I cannot change the HTML (just the script).

Answer 1

var price = $('.price').contents().filter(function() {
    return this.nodeType == 3;   //Filtering by text node
}).text();

demo