如何使用jquery删除父div中具有相同类的重复元素答案

【问题标题】：How to removed repeated element with same class in parent div using jquery如何使用jquery删除父div中具有相同类的重复元素
【发布时间】：2019-09-18 13:13:51
【问题描述】：

我想删除父 div 中同一类的重复元素。我使用了以下代码，但它删除了除 first 之外的所有元素。

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>

【问题讨论】：

首先，why do you have repeated content? 是问题所在。您正在尝试解决一个XYProblem 可能。
@NidhinJoseph，我无法重复内容，这些内容是动态的，所以我想删除父 div 中的重复类。

标签： javascript jquery html

【解决方案1】：

在此处检查此代码，我只是用选择器删除了第二个元素，希望对您有所帮助

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

【讨论】：

是的。这对我来说可以。动态删除元素的简单方法。

【解决方案2】：

您可以尝试使用:gt() 选择器，该选择器在匹配集中选择大于 index 的 index 处的所有元素。

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>

【讨论】：

【解决方案3】：

如果结构不变，可以使用: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>

【讨论】：