Remove extra dashes with jQuery

1 Views

Here is my situation. I’m helping a client with their Woocommerce (WordPress) Site. I’ve been using jquery to hide the higher variation prices and only showing the lower price. There is the “-” that still shows and I want to remove that with jQuery. I’ve been trying for hours and not succeeded. Help would be appreciated.

Here is my HTML code:

Read More
<span class="price"><del><span class="amount">$13.29</span>–<span class="amount">$332.25</span>

</del> <ins><span class="amount">$10.63</span>–<span class="amount">$151.84</span></ins>

</span>
<div class="product-meta-wrapper">

<h3 class="heading-title product-title"><a href="http://sproutman.com/shop/product/beginners-dozen-seeds/">Beginner’s Dozen Sprouting Seeds</a></h3>

<div class="second-rating"></div>   <span class="price"><del><span class="amount">$99.92</span>

</del> <ins><span class="amount">$87.89</span></ins>

</span>
<div class="list_add_to_cart"><a href="/product-category/organic-sprouting-seeds/recommendations-for-beginners/?add-to-cart=650" rel="nofollow" data-product_id="650" data-product_sku="SPRTSAMP" class="button add_to_cart_button product_type_simple">Add to cart</a>

</div>
</div>

And my jquery code: 

$(document).ready(function () {
var firstHighPrice = $('del span:nth-child(2)');
var secondHighPrice = $('ins span:nth-child(2)');
firstHighPrice.hide();
secondHighPrice.hide();

});

Link to JSFiddle: http://jsfiddle.net/a5Lyxsur/2/

Post Views: 1

Related posts

Leave a Reply

3 comments

  1. If you know that the text before spans you are hinding is - that you also want to remove, then just use previousSibling to get text node to remove:

    firstHighPrice.hide();
$(firstHighPrice[0].previousSibling).remove();

secondHighPrice.hide();
$(secondHighPrice[0].previousSibling).remove();

    Demo: http://jsfiddle.net/a5Lyxsur/3/

  2. If you put <span></span> tags around “-” like below 

    <span class="price">
    <del>
        <span class="amount">$13.29</span>
        <span>–<span>
        <span class="amount">$332.25</span>
   </del>

    Then modify the selectors as shown below 

    $(document).ready(function () {
    var firstHighPrice = $('del span:nth-child(2), del span:nth-child(3)');
    var secondHighPrice = $('ins span:nth-child(2), ins span:nth-child(3)');
    firstHighPrice.hide();
    secondHighPrice.hide();
});

    Working sample is at http://jsfiddle.net/a5Lyxsur/4/

  3. In this each function is applied to each span with class price and detach method to the del and ins elements and their span elements within. Then empty method is used to remove the dash (-). Finally, the previously detached elements are appended back again. Fiddle

    $('span.price').each(function () {
    var delSpans = $(this).find('del span').detach();

    $(this).find('del').empty();

    $(this).find('del').append(delSpans);

    var insSpans = $(this).find('ins span').detach();

    $(this).find('ins').empty();

    $(this).find('ins').append(insSpans);
});

var firstHighPrice = $('del span:nth-child(2)');
var secondHighPrice = $('ins span:nth-child(2)');
firstHighPrice.hide();
secondHighPrice.hide();