当另一个span元素包含特定文本时删除兄弟div [英] Removing sibling div when another span element contains specific text

问题描述

我试图用 class =。basket__item-cell.basket__item-qty删除div，只有当 hidden-sku 等于 020-01119 。

我尝试了使用.each的不同方法（函数）或.next（），但无法绕过它。为了说明我已经添加了下面的代码的示例，请注意，我不能添加任何id或类，并且行的顺序可能会有所不同。 / p>

（function（$） filter（function（）{return $（this）.text（）。indexOf（020-01119）！== false;}）。closest（。basket__item-cell.basket__item-name）。next（。 （）;}}。}}。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> < /跨度> < / DIV> < div class =basket__item-cell basket__item-qty> < div class =input-combobox main-input-combobox input-combobox__with-qtydata-label =Qtydata-range-min =1data-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>两个< / 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> < /跨度> < / DIV> < div class =basket__item-cell basket__item-qty> < div class =input-combobox main-input-combobox input-combobox__with-qtydata-label =Qtydata-range-min =1data-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>三< / 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> < /跨度> < / DIV> < div class =basket__item-cell basket__item-qty> < div class =input-combobox main-input-combobox input-combobox__with-qtydata-label =Qtydata-range-min =1data-range-max =12> 3< / DIV> < / div>< / div>  

解决方案

这将完成这项工作，并且可以很容易地理解它一眼就能看到的内容。

我还假设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的）; 
  

I am trying to remove div with class=".basket__item-cell.basket__item-qty" only when hidden-sku is equal to "020-01119".

I've tried different approaches using .each(function) or .next() but could not get my head around it. In order to illustrate the example I've added the code bellow.

Please note that I can not add any id's or classes and the order of the rows may vary.

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

解决方案

This will do the job and arguably it's easier to understand what it's doing at glance.

I am also assuming the SKU is always going to be 020-01119 and never just containing that string? If that's not the case just put the indexOf back into the if condition.

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

这篇关于当另一个span元素包含特定文本时删除兄弟div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！