[英]Removing sibling div when another span element contains specific text
I am trying to remove div with class=".basket__item-cell.basket__item-qty"
only when hidden-sku
is equal to "020-01119" . 我仅在hidden-sku
等于“ 020-01119”时,才尝试使用class=".basket__item-cell.basket__item-qty"
删除div。
I've tried different approaches using .each(function) or .next() but could not get my head around it. 我已经尝试过使用.each(function)或.next()的不同方法,但无法解决。 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. 请注意,我无法添加任何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>
Watch out how you check the presence of string using indexOf()
: 请注意如何使用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)
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? 我还假设SKU始终为020-01119
并且永远不会仅包含该字符串? If that's not the case just put the indexOf back into the if condition. 如果不是这种情况,只需将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);
.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. .next()
仅获得下一个DOM节点, 然后将其与您指定的类进行比较。
In your case, you have -price
between -name
and -qty
你的情况,你有-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">
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()
. 因此它的-name
,那么接下来,这是-price
,并说,这是-qty
,它是没有,所以给你的不匹配.remove()
Here are some ideas to replace the .next(): 以下是替换.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();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.