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"> </label>
<label class="valid"> </label>
<label class="valid"> </label>
</div>
<div class="test2">
<label class="valid"> </label>
<label class="valid"> </label>
<label class="valid"> </label>
<label class="valid"> </label>
<label class="valid"> </label>
</div>
</div>
Expected is:
<div class="content">
<div class="test1">
<label class="valid"> </label>
</div>
<div class="test2">
<label class="valid"> </label>
</div>
</div>
Select all elements except the first one using
:nth-child
pseudo-class selector and then remove them.Or using combination of
:first-child
and:not()
pseudo-class selectors.FYI : To hide the elements initially, you can use following css.
Without using jQuery library.