使用 jQuery 删除多余的破折号答案

【问题标题】：Remove extra dashes with jQuery使用 jQuery 删除多余的破折号
【发布时间】：2015-01-03 19:25:42
【问题描述】：

这是我的情况。我正在帮助客户使用他们的 Woocommerce (WordPress) 网站。我一直在使用 jquery 来隐藏较高的变化价格，只显示较低的价格。仍然显示“-”，我想用 jQuery 删除它。我已经尝试了几个小时但没有成功。帮助将不胜感激。

这是我的 HTML 代码：

<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>

还有我的 jquery 代码：

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

});

JSFiddle 链接：http://jsfiddle.net/a5Lyxsur/2/

【问题讨论】：

标签： jquery wordpress woocommerce

【解决方案1】：

如果您知道要删除的 span 之前的文本是 - 并且您也想删除，那么只需使用 previousSibling 获取要删除的文本节点：

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

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

演示：http://jsfiddle.net/a5Lyxsur/3/

【讨论】：

【解决方案2】：

如果你把<span></span>标签放在“-”周围，如下所示

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

然后修改选择器如下图

$(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();
});

工作样本位于http://jsfiddle.net/a5Lyxsur/4/

【讨论】：

如果可以控制 HTML 结构，这确实是一种正确的方法。

【解决方案3】：

在此each 函数中，将class price 和detach 方法应用于del 和ins 元素及其中的span 元素及其span 元素。然后empty 方法用于删除破折号（-）。最后，先前分离的元素再次被附加回来。 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();

【讨论】：