jQuery - 刪除'對應'項目

Question

我有一個列表，其中包含兩種不同的項目，product-x和product-y。

當用戶刪除產品x我需要它的等效產品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

你應該只需要添加一個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 3

我會這樣做的方式是獲取使用jquerys .val（）單擊的product-y的值。然後，您可以遍歷所有產品的x，一旦找到匹配的.val，那麼您可以刪除它。

如果需要，我可以給你寫一些代碼，但希望這足以幫助你理解如何解決它。

E/- 保羅的辦法是更優雅的使用是：d

Answer 4

快速注：應使用某種形式的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 5

稍有不同的看法：

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

淡出（）是性感;）

Answer 6

無需任何額外的標記或類，你可以使用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>