how to select just the top element text?

Question

i have this html:

<span class="price">
        $61.00
          <span class="detailFreeShipping">With Free Shipping</span>
    </span>

How to write a jquery selector which give me the price text only "$61.00"?

i want to make it generic as i can because may be in some cases there is no inner span, just the parent one.

Answer 1

You can do this:

jQuery.fn.extend({
    textOnly: function() {
        // make a clone of this object so we are not changing the actual DOM
        var obj = $(this).clone();

        // remove all the children, i.e. any DOM objects
        obj.children().remove();

        // get the text value after all DOM elements are removed
        return obj.text();
    }
});

then you can call it like this

var price = $(".price").textOnly();

you will get the value you want.