javascript - 当另一个 span 元素包含特定文本时删除同级 div

Question

仅当 hidden-sku 等于 时，我才尝试使用 class=".basket__item-cell.basket__item-qty" 删除 div “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);