Removing sibling div when another span element contains specific text

Question

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>

change `.next` to `.nextAll` or `.nextAll(...).first()` if you're paranoid — freedomn-m, Nov 04 '16 at 15:16
Possible duplicate of [Trying to select single elements within a class. Not working with "jQuery(this).next"](http://stackoverflow.com/questions/39828074/trying-to-select-single-elements-within-a-class-not-working-with-jquerythis) — freedomn-m, Nov 04 '16 at 15:18

score 1 · Answer 1 · answered Nov 04 '16 at 15:19

Watch out how you check the presence of string using 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)

Stuart · Accepted Answer · 2016-11-04T15:33:08.770

1

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

edited Nov 04 '16 at 15:33

answered Nov 04 '16 at 15:27

Stuart

201
1
11

offtopic: you don't need `$("selector", $(this))` you can just do `$("selector", this)` when this is a DOM node – freedomn-m Nov 04 '16 at 15:31

score 0 · Answer 3 · answered Nov 04 '16 at 15:28

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

.next() gets just the very next DOM node, then compares it with the class(es) you've specified.

In your case, you have -price between -name and -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">

so it gets -name, then the next, which is -price and says, is this -qty, which it isn't, so gives you no matches for .remove().

Here are some ideas to replace the .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();

Removing sibling div when another span element contains specific text

3 Answers3

Linked