[英]How to removed repeated element with same class in parent div using jquery
我想刪除父div中相同類的重復元素。 我使用了以下代碼，但它刪除了除第一個元素以外的所有元素。
var found = {};
$('.product-bottom').each(function(){
var $this = $(this);
if(found[$this.data('id')]){
$this.remove();
}
else{
found[$this.data('id')] = true;
}
});
以下是我的HTML ..
<div class="product-bottom">
<div class="col-lg-12"><span>Title</span></div>
<a href="#" class="button custom_product" data-quantity="1"></a>
<div class="col-lg-12"><span>Title</span></div>
<a href="#" class="button custom_product" data-quantity="1"></a>
</div>
<div class="product-bottom">
<div class="col-lg-12"><span>Title</span></div>
<a href="#" class="button custom_product" data-quantity="1"></a>
<div class="col-lg-12"><span>Title</span></div>
<a href="#" class="button custom_product" data-quantity="1"></a>
</div>
<div class="product-bottom">
<div class="col-lg-12"><span>Title</span></div>
<a href="#" class="button custom_product" data-quantity="1"></a>
<div class="col-lg-12"><span>Title</span></div>
<a href="#" class="button custom_product" data-quantity="1"></a>
</div>
我想刪除每個父div product-bottom中重復的custom_product類元素。 所以我的輸出將是..
<div class="product-bottom">
<div class="col-lg-12"><span>Title</span></div>
<a href="#" class="button custom_product" data-quantity="1"></a>
</div>
<div class="product-bottom">
<div class="col-lg-12"><span>Title</span></div>
<a href="#" class="button custom_product" data-quantity="1"></a>
</div>
<div class="product-bottom">
<div class="col-lg-12"><span>Title</span></div>
<a href="#" class="button custom_product" data-quantity="1"></a>
</div>
在這里檢查此代碼，只是我用選擇器移除了第二個元素，希望對您有所幫助
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <script> $(document).ready(function() { $('.product-bottom .col-lg-12:nth-of-type(2)').remove(); $('.product-bottom a:nth-of-type(2)').remove(); }); </script> </head> <div class="product-bottom"> <div class="col-lg-12"><span>Title</span></div> <a href="#" class="button custom_product" data-quantity="1"></a> <div class="col-lg-12"><span>Title 1</span></div> <a href="#" class="button custom_product" data-quantity="1"></a> </div> <div class="product-bottom"> <div class="col-lg-12"><span>Title</span></div> <a href="#" class="button custom_product" data-quantity="1"></a> <div class="col-lg-12"><span>Title 1</span></div> <a href="#" class="button custom_product" data-quantity="1"></a> </div> <div class="product-bottom"> <div class="col-lg-12"><span>Title</span></div> <a href="#" class="button custom_product" data-quantity="1"></a> <div class="col-lg-12"><span>Title 1</span></div> <a href="#" class="button custom_product" data-quantity="1"></a> </div> <body> </body> <html>
您可以嘗試使用:gt()選擇器，該選擇器選擇索引大於匹配集中索引的所有元素。
var el = $(this).find('.button.custom_product:gt(0)');
演示：
$('.product-bottom').each(function(){ var el = $(this).find('.button.custom_product:gt(0)'); el.prev('div').remove(); el.remove(); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="product-bottom"> <div class="col-lg-12"><span>Title1 of 1</span></div> <a href="#" class="button custom_product" data-quantity="1">1 of 1</a> <div class="col-lg-12"><span>Title2 of 1</span></div> <a href="#" class="button custom_product" data-quantity="1">2 of 1</a> </div> <div class="product-bottom"> <div class="col-lg-12"><span>Title1 of 2</span></div> <a href="#" class="button custom_product" data-quantity="1">1 of 2</a> <div class="col-lg-12"><span>Title2 of 2</span></div> <a href="#" class="button custom_product" data-quantity="1">2 of 2</a> </div> <div class="product-bottom"> <div class="col-lg-12"><span>Title1 of 3</span></div> <a href="#" class="button custom_product" data-quantity="1">1 of 3</a> <div class="col-lg-12"><span>Title2 of 3</span></div> <a href="#" class="button custom_product" data-quantity="1">2 of 3</a> </div>
如果結構保持不變，則可以使用:last-of-type偽類刪除重復的內容。
$(document).ready(function() { $('.product-bottom div:last-of-type').remove(); $('.product-bottom .custom_product:last-of-type').remove(); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="product-bottom"> <div class="col-lg-12"><span>Title</span></div> <a href="#" class="button custom_product" data-quantity="1">1 of 1</a> <div class="col-lg-12"><span>Title</span></div> <a href="#" class="button custom_product" data-quantity="1">2 of 1</a> </div> <div class="product-bottom"> <div class="col-lg-12"><span>Title</span></div> <a href="#" class="button custom_product" data-quantity="1">1 of 2</a> <div class="col-lg-12"><span>Title</span></div> <a href="#" class="button custom_product" data-quantity="1">2 of 2</a> </div> <div class="product-bottom"> <div class="col-lg-12"><span>Title</span></div> <a href="#" class="button custom_product" data-quantity="1">1 of 3</a> <div class="col-lg-12"><span>Title</span></div> <a href="#" class="button custom_product" data-quantity="1">2 of 3</a> </div>
如何使用jQuery在同一個父div中有效選擇元素
[英]How to select an element efficiently in the same parent div using jQuery
如何使用jQuery在同一個父元素內動態將“ left” px應用於div的寬度
[英]How can I dynamically apply the “left” px to a div's width, within the same parent element, using jQuery
如何使用jQuery在同一個類的不同父元素下捕獲一個html元素？
[英]how to catch up a html element with same class which is under different parent using jQuery?
通過jquery添加新的div /元素，但沒有ID / class div父級
[英]Add new div / element by jquery but there is no ID / class div parent
如何使用jQuery將焦點添加到已從中刪除類的div中包含的輸入
[英]How to add focus to the input contained in the div from which a class have been removed using jQuery
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.