除去同级格当另一个span元素包含特定文本

Question

我试图删除DIV与class=".basket__item-cell.basket__item-qty"只有当hidden-sku等于“020-01119”。

我试过不同的方法使用.each（function）或.next（），但无法绕过它。为了说明我添加了下面的代码的例子。

请注意，我无法添加任何ID或类，并且行的顺序可能会有所不同。

(function($) { 
 
    $('.hidden-sku').filter(function() { 
 
    return $(this).text().indexOf("020-01119") !== false; 
 
    }).closest(".basket__item-cell.basket__item-name").next(".basket__item-cell.basket__item-qty").remove(); 
 
})(jQuery)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="basket__item-data basket__item-data--right"> 
 
    <div class="basket__item-cell basket__item-name"> 
 
    <h2 class="product-name">One </h2> 
 
    <span class="hidden-sku">020-01119</span> 
 
    </div> 
 
    <div class="basket__item-cell basket__item-price"> 
 
    <span class="cart-price"><span class="price"><span class="currency"></span>18</span> 
 
    </span> 
 
    </div> 
 
    <div class="basket__item-cell basket__item-qty"> 
 
    <div class="input-combobox main-input-combobox input-combobox__with-qty" data-label="Qty" data-range-min="1" data-range-max="12">1 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="basket__item-data basket__item-data--right"> 
 
    <div class="basket__item-cell basket__item-name"> 
 
    <h2 class="product-name">Two </h2> 
 
    <span class="hidden-sku">020-01117</span> 
 
    </div> 
 
    <div class="basket__item-cell basket__item-price"> 
 
    <span class="cart-price"><span class="price"><span class="currency"></span>18</span> 
 
    </span> 
 
    </div> 
 
    <div class="basket__item-cell basket__item-qty"> 
 
    <div class="input-combobox main-input-combobox input-combobox__with-qty" data-label="Qty" data-range-min="1" data-range-max="12">2 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="basket__item-data basket__item-data--right"> 
 
    <div class="basket__item-cell basket__item-name"> 
 
    <h2 class="product-name">Three </h2> 
 
    <span class="hidden-sku">020-01118</span> 
 
    </div> 
 
    <div class="basket__item-cell basket__item-price"> 
 
    <span class="cart-price"><span class="price"><span class="currency"></span>18</span> 
 
    </span> 
 
    </div> 
 
    <div class="basket__item-cell basket__item-qty"> 
 
    <div class="input-combobox main-input-combobox input-combobox__with-qty" data-label="Qty" data-range-min="1" data-range-max="12">3 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

这将做的工作，可以说是很容易理解它做什么的一目了然。

我还假设SKU总是会是020-01119而且永远不会包含该字符串？如果不是这种情况，只需将indexOf放回if条件即可。

(function($) { 
    $('.basket__item-data').each(function() { 
    var sku = $('.hidden-sku', this); 

    if (sku.text() === '020-01119') { 
     $('.basket__item-cell.basket__item-qty', this).remove(); 
    } 
    }); 
})(jQuery); 

Answer 2

当心你使用indexOf()如何检查字符串的存在：

(function($) { 
    $('.hidden-sku').filter(function() { 
    return $(this).text().indexOf("020-01119") > -1; 
    }).closest(".basket__item-cell.basket__item-name").next(".basket__item-cell.basket__item-qty").remove(); 
})(jQuery) 

Answer 3

​​

.next()得到公正第二天DOM节点，然后与您所指定的类（ES）进行比较。

你的情况，你有和-qty-price之间-name

<div class="basket__item-cell basket__item-name"> 
<div class="basket__item-cell basket__item-price"> 
<div class="basket__item-cell basket__item-qty"> 

因此它的-name，那么接下来，这是-price并说，这是-qty，它是没有，所以给你没有匹配.remove()。

这里有一些想法，以取代的.next（）：

// Use nextAll() 
.closest(".basket__item-cell.basket__item-name") 
.nextAll(".basket__item-cell.basket__item-qty") 
.remove(); 

// Use nextAll().first() if you there might be more 
.closest(".basket__item-cell.basket__item-name") 
.nextAll(".basket__item-cell.basket__item-qty") 
.first() 
.remove(); 

// use .siblings 
.closest(".basket__item-cell.basket__item-name") 
.siblings(".basket__item-cell.basket__item-qty") 
.remove(); 

// Go up to parent, then down 
// Most likely to work if the structure changes 
.closest(".basket__item-cell.basket__item-name") 
.parent() 
.find(".basket__item-cell.basket__item-qty") 
.remove(); 

// Go up to parent in one step, then down 
// Most likely to work if the structure changes 
.closest(".basket__item-data") 
.find(".basket__item-cell.basket__item-qty") 
.remove();