javascript selector only value of parent element [duplicate]

Question

how do I extract the content from this HTML elements:

<span class="woocommerce-Price-amount amount">399&nbsp;<span class="woocommerce-Price-currencySymbol">USD</span> </span>

I would like to get the price (which here is 399).

var number_price = document.querySelector(".woocommerce-Price-amount");

I gets the hole elements include parent and child HTML elements. I would like to get only the number 399 here.

epascarello · Accepted Answer · 2023-04-12 16:01:01Z

Read the text and parse it as a number. It will be fine as long as the number is the start of the string.

var number_price = parseFloat(document.querySelector(".woocommerce-Price-amount").textContent); console.log(number_price)

<span class="woocommerce-Price-amount amount">399&nbsp;<span class="woocommerce-Price-currencySymbol">USD</span> </span>

Unmitigated · Accepted Answer · 2023-04-12 16:07:26Z

You can get the text from the firstChild, which is a text node.

const number_price = document.querySelector(".woocommerce-Price-amount"); console.log(number_price.firstChild.textContent.trim());

<span class="woocommerce-Price-amount amount">399&nbsp;<span class="woocommerce-Price-currencySymbol">USD</span> </span>

Thank you so much, I do use textContent and firstChild but forgot about the trim part. Thank you, thank you.

2 Answers 2