我想删除父 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>
关于javascript - 如何使用jquery删除父div中具有相同类的重复元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57985188/