Remove duplicate elements from the DOM

Question

Want to remove the duplicated elements with the same classname(valid) from the DOM. Below is the example:

<div class="content">
<div class="test1">
    <label class="valid">&nbsp;</label>
    <label class="valid">&nbsp;</label>
    <label class="valid">&nbsp;</label>
</div>  
<div class="test2">
    <label class="valid">&nbsp;</label>
    <label class="valid">&nbsp;</label>
    <label class="valid">&nbsp;</label>
    <label class="valid">&nbsp;</label>
    <label class="valid">&nbsp;</label>
</div>
</div>

Expected is:

<div class="content">
<div class="test1">
    <label class="valid">&nbsp;</label>
</div>  
<div class="test2">
    <label class="valid">&nbsp;</label>
</div>
</div>

Answer 1

Select all elements except the first one using :nth-child pseudo-class selector and then remove them.

$('.valid:nth-child(n+2)').remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<div class="test1">
    <label class="valid">&nbsp;</label>
    <label class="valid">&nbsp;</label>
    <label class="valid">&nbsp;</label>
</div>  
<div class="test2">
    <label class="valid">&nbsp;</label>
    <label class="valid">&nbsp;</label>
    <label class="valid">&nbsp;</label>
    <label class="valid">&nbsp;</label>
    <label class="valid">&nbsp;</label>
</div>
</div>

---

Or using combination of :first-child and :not() pseudo-class selectors.

$('.valid:not(:first-child)').remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<div class="test1">
    <label class="valid">&nbsp;</label>
    <label class="valid">&nbsp;</label>
    <label class="valid">&nbsp;</label>
</div>  
<div class="test2">
    <label class="valid">&nbsp;</label>
    <label class="valid">&nbsp;</label>
    <label class="valid">&nbsp;</label>
    <label class="valid">&nbsp;</label>
    <label class="valid">&nbsp;</label>
</div>
</div>

---

FYI : To hide the elements initially, you can use following css.

.valid:nth-child(n+2){
   display : none;
}

---

Without using jQuery library.

// get all duplicate element and convert nodelinst into array
// use [].slice.call in older browser to convert in to an array
Array.from(document.querySelectorAll('.valid:nth-child(n+2)'))
  // iterate over elements 
  .forEach(function(ele) {
    // remove element from its parent
    ele.parentNode.removeChild(ele);
  });

<div class="content">
  <div class="test1">
    <label class="valid">&nbsp;</label>
    <label class="valid">&nbsp;</label>
    <label class="valid">&nbsp;</label>
  </div>
  <div class="test2">
    <label class="valid">&nbsp;</label>
    <label class="valid">&nbsp;</label>
    <label class="valid">&nbsp;</label>
    <label class="valid">&nbsp;</label>
    <label class="valid">&nbsp;</label>
  </div>
</div>