javascript - jQuery - 删除 'corresponding' 项

Question

我有一个列表，其中包含两种不同的商品，product-x 和 product-y。

当用户删除 product-x 时，我需要它的等效 product-y 也删除，反之亦然。

我已经尝试了几种不同的方法，但似乎没有任何效果。感谢您的帮助!

---

JS

$(document).on('click', '.delete-item', function(e) {
    $(this).parents('.product-x').delay(500).remove();
    $(this).parents('.product-y').delay(500).remove();
});

---

CSS

.product-x, .product-y{
    width:100px;
    height:50px;
    margin:10px;
}

.product-x{
    border:red 1px solid;
}

.product-y{
    border:navy 1px solid;
}

---

HTML

<div id="product-x-wrapper"> 
    <div class="product-x">1 
          <button class="delete-item">x</button>
        </div>
        <div class="product-x">2
          <button class="delete-item">x</button>
        </div>
        <div class="product-x">3
          <button class="delete-item">x</button>
        </div>
    </div>
<div id="product-y-wrapper"> 
        <div class="product-y">1
          <button class="delete-item">x</button>
        </div>
        <div class="product-y">2
          <button class="delete-item">x</button>
        </div>
        <div class="product-y">3
          <button class="delete-item">x</button>
        </div>
</div>

Answer 1

首先，我会向每个元素添加一个 data-product-id，这样您就可以在不依赖人类可读标签的情况下找到它们:

<div id="product-wrapper">
  <div class="product-x" data-product-id="1">1 <button...></div>
  <div class="product-x" data-product-id="2">2 <button...></div>
  <div class="product-x" data-product-id="3">3 <button...></div>
  <div class="product-y" data-product-id="1">1 <button...></div>
  <div class="product-y" data-product-id="2">2 <button...></div>
  <div class="product-y" data-product-id="3">3 <button...></div>
</div>

然后你可以像这样删除匹配的兄弟:

$(document).on('click', '.delete-item', function(e) {
  var id = $(this).parent().data('product-id');
  $("#product-wrapper").find('div[data-product-id="' + id + '"]').delay(500).remove();
});

编辑:由于您已将问题更改为将产品分成两个包装器，因此您可以使用这种方法，但只需从两个地方删除内容，如下所示:

$(document).on('click', '.delete-item', function(e) {
  var id = $(this).parent().data('product-id');
  $("#product-x-wrapper").find('div[data-product-id="' + id + '"]').delay(500).remove();
  $("#product-y-wrapper").find('div[data-product-id="' + id + '"]').delay(500).remove();
});