堆栈内存溢出
  简体   繁体   English

如何使用jQuery删除父div中相同类的重复元素

[英]How to removed repeated element with same class in parent div using jquery

 原文  2019-09-18 04:39:26  4   3    javascript/ jquery/ html

问题描述

I want to remove repeated element of same class in parent div. 我想删除父div中相同类的重复元素。 I have used following code but it's remove all the element except first. 我使用了以下代码，但它删除了除第一个元素以外的所有元素。 

var found = {};
$('.product-bottom').each(function(){
    var $this = $(this);
    if(found[$this.data('id')]){
         $this.remove();   
    }
    else{
         found[$this.data('id')] = true;   
    }
});

Following is my HTML.. 以下是我的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>

I want to remove repeated custom_product class element in each parent div product-bottom . 我想删除每个父div product-bottom中重复的custom_product类元素。 So my output will be.. 所以我的输出将是.. 

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

3 个解决方案

解决方案1
 5  2019-09-18 05:13:51

Check this code here just I emoved the second element with selector I hope its help you 在这里检查此代码，只是我用选择器移除了第二个元素，希望对您有所帮助 

 <!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
 1 已采纳  2019-09-18 04:46:50

You can try with :gt() selector that selects all elements at an index greater than the index within the matched set. 您可以尝试使用:gt()选择器，该选择器选择索引大于匹配集中索引的所有元素。 

var el = $(this).find('.button.custom_product:gt(0)');

Demo: 演示： 

 $('.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
 0  2019-09-18 04:56:19

If the structure remains the same, you can use the :last-of-type pseudo-class to remove the repeated content. 如果结构保持不变，则可以使用: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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何使用jQuery在同一个父div中有效选择元素 - How to select an element efficiently in the same parent div using jQuery 如何通过使用jQuery检查父元素的类 - How to check class of parent element by 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在相同的类下获取相应的div元素 - get respective div element under same class using jquery 使用jQuery将类添加到父div之外的该元素 - Add class to this element outside of parent div with jQuery 如何使用jQuery在同一个类的不同父元素下捕获一个html元素？ - how to catch up a html element with same class which is under different parent using jQuery? 使用jquery按类隐藏同一父项内的元素 - Hide element inside same parent by class with jquery jQuery在同一div中将一个类添加到所选元素 - jquery add a class to selected element in same div 通过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
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM