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

时间:2016-11-04 15:12:49

标签: javascript jquery html

仅当class=".basket__item-cell.basket__item-qty"等于 “020-01119” 时,我才会尝试使用hidden-sku删除div。

我尝试过使用.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>

3 个答案:

答案 0 :(得分:1)

注意如何使用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)

答案 1 :(得分: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);

答案 2 :(得分:0)

.closest(".basket__item-cell.basket__item-name")
.next(".basket__item-cell.basket__item-qty")
.remove();

.next()只获取下一个DOM节点,然后将其与您指定的类进行比较。

在您的情况下,-price-name之间的-qty

<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,它不是,所以不给你{{{ 1}}。

以下是替换.next()的一些想法:

.remove()