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

Answer 2

如果没有任何其他标记或类，您可以使用jQuery的.index()函数删除相应的项目：

$('.delete-item').each(function() {
  $(this).parent().data('idx', $(this).parent().index())
}).click(function() {
  var idx = $(this).parent().data('idx');
  $('div > div').each(function() {
    if ($(this).data('idx') === idx) $(this).remove()
  })
})

.product-x,
.product-y {
  width: 100px;
  height: 50px;
  margin: 10px;
}
.product-x {
  border: red 1px solid;
}
.product-y {
  border: navy 1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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 3

你应该只是添加一个id，这样你就可以通过id来查找它，但假设它们都是对应的，并按顺序你可以这样做

$(document).on('click', '.delete-item', function(e) {
    var producty = $(this).parent();
    var index = $(".product-y").index(producty );

    $('.product-x:eq('+ index +')').remove();
}

这也允许你的html不同

Answer 4

我这样做的方法是使用jquerys .val（）获取你点击的产品的价值。然后你可以循环遍历所有的产品-x，一旦找到匹配的.val，你就可以删除它。

如果您需要，我可以给您写一些代码，但希望这足以帮助您了解如何解决它。

e / - Pauls方式更优雅使用：D

Answer 5

快速注意：您应该使用某种DOM句柄，可以使用选择器访问，例如class，id，data- attributes，name等。

现在，如果您仍然希望采用这种方式，我强烈反对，那么您可以使用:contains选择器。

$(document).on('click', '.delete-item', function(e) {
    $content = $(this).parent().html();
    $(this).parents('.product-x').delay(500).remove();
    $(".product-y:contains("+$content+")).delay(500).remove();
});

Answer 6

略有不同：

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<div data-product="one" class="one product-x">1 
  <button class="delete-item">x</button>
</div>
<div data-product="two" class="two product-x">2
  <button class="delete-item">x</button>
</div>
<div data-product="three" class="three product-x">3
  <button class="delete-item">x</button>
</div>
<div data-product="one" class="one product-y">1
  <button class="delete-item">x</button>
</div>
<div data-product="two" class="two product-y">2
  <button class="delete-item">x</button>
</div>
<div data-product="three" class="three product-y">3
  <button class="delete-item">x</button>
</div>

<script type="text/javascript">
$('.delete-item').on('click',function(e){
    var theProduct = $(this).parent().data('product');
    var theElements = $('div[data-product="' + theProduct + '"]');
    theElements.delay(500).fadeOut();
})
</script>

fadeOut（）更性感;）

jQuery - 删除“对应”项

6 个答案: