how to check if a div with a certain value is duplicated and then hide the duplicated div in jQuery

Question

I am having trouble checking if a div with a certain value is duplicated and then hiding that duplicated div.

Here's my code:

 <div class="div">Java</div> <div class="div">Python</div> <div class="div">Php</div> <div class="div">Java</div> <div class="div">Java</div> <div class="div">Java</div> 

Answer 1

You need to loop through all div classes and then check if the current div class is already exist, this will check using div class html content. Script is like this:

var divs = [];
$(".div").each(function(i,v){
   if(divs.indexOf(v.html())>=0){
       divs.push(v.html()); //collect all unique divs
   }else{
      //this is the duplicate div. need to hide it.
      $(this).hide();
   }
});

Answer 2

Try this,I hope this is what you are looking for.

 var a = new Array(); $('.div').each(function(index) { text = $(this).text(); if($.inArray(text, a)!=-1){ $(this).closest('.div').hide(); }else{ a.push(text); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="div">Java</div> <div class="div">Python</div> <div class="div">Php</div> <div class="div">Java</div> <div class="div">Java</div> <div class="div">Java</div> 

Answer 3

well, it depends, if you want to check if hes inside text is the same then you can run over all the divs and use something like array to check if already exists.

 var exists = []; $(document).ready(function(){ $(".div").each(function(){ var text = $(this).text(); if(exists.indexOf(text) != -1){ $(this).hide(); }else{ exists.push(text); } }) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="div">Java</div> <div class="div">Python</div> <div class="div">Php</div> <div class="div">Java</div> <div class="div">Java</div> <div class="div">Java</div> 

Answer 4

You can wrap all the elements you want to remove the duplicates in a class .container You can then get all the children of this element, and turn it into an array using .toArray() . You can then use a Set to remove all the duplicates in this array: and then use a Set to remove the duplicates within the array and then display this:

 const unique = $('.container').children().toArray().map(e => '' + e.outerHTML); const elems = [...new Set(unique)].join(''); $('.container').html(elems); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="div">Java</div> <br /> <div class="div">Python</div> <div class="div">Php</div> <div class="div">Java</div> <div class="div">Java</div> <div class="div">Java</div> </div> 

If you wish you could use this as a one-liner:

$('.container').html([...new Set($('.container').children().toArray().map(e => ''+e.outerHTML))].join(''));