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

标签 javascript jquery html

我想删除父 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/

相关文章:

javascript - 在 JQuery 中使图像遵循圆形路径的最佳方法?

JavaScript 代码仅调用一次代码隐藏函数

javascript - 从祖先克隆一个对象

php - 图像未在 MySQL 中上传

javascript - 使用javascript自动检测高度

javascript - 错误 [ERR_MODULE_NOT_FOUND] : Cannot find package '@babel/plugin-preset-react' imported from

javascript - 将数组拆分为 block 并对每个索引求和,然后合并到另一个数组中

javascript - dom操作来重现订单列表?

jquery - 侧边栏全高,位于页脚顶部

javascript - 我的 jplayerplaylist 删除功能不起作用