CODEWITHSUNDEEP
javascriptjqueryhtml
ultrarun
ultrarun

Reputation: 274

Remove duplicate elements by class with JQuery

I want to delete duplicate span.film-date elements using the secondary class. For example I only want to keep the first span with the classes of "film-date Wed29May" and the first span with the classes of "film-date Thur30May".

<div class="film-time-list">
<span class="film-date Wed29May">Wed 29 May</span>
<a class="film-tickets" href="#">2.30pm</a>
<span class="film-date Wed29May">Wed 29 May</span>
<a class="film-tickets" href="#">5.20pm</a>
<span class="film-date Thur30May">Thur 30 May</span>
<a class="film-tickets" href="#">2.30pm</a>
<span class="film-date Thur30May">Thur 30 May</span>
<a class="film-tickets" href="#">5.20pm</a>
</div>

I thought this would be straight forward enough but as the class that is output dynamically could be any date this snippet won't work which was my initial thought.

$('.couldBeAnyClass').not(':first').remove();

Any pointers would be great!

My output would be:

Wed 29 May 2.30pm 5.20pm
Thur 30 May 2.30pm 5.20pm

Upvotes: 2

Views: 1376

Answers (4)

Jonathan Hamel
Jonathan Hamel

Reputation: 1393

Using a set so it does not have to be ordered. Considering the date is the second class passed to the html element. 

const dateSet = new Set();
$(".film-date").each((idx, el) => {
  if(dateSet.has(el.classList[1])) { el.remove(); }
  else { dateSet.add(el.classList[1]); }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="film-time-list">
<span class="film-date Wed29May">Wed 29 May</span>
<a class="film-tickets" href="#">2.30pm</a>
<span class="film-date Wed29May">Wed 29 May</span>
<a class="film-tickets" href="#">5.20pm</a>
<span class="film-date Thur30May">Wed 29 May</span>
<a class="film-tickets" href="#">2.30pm</a>
<span class="film-date Thur30May">Wed 29 May</span>
<a class="film-tickets" href="#">5.20pm</a>
</div>

Upvotes: 0

PeterKA
PeterKA

Reputation: 24638

This should do it! Since the corresponding anchor elements are not part of the span elements they do not get removed unless they are appended to the element being removed:

$(this).append( $(this).next() ).remove();


$(function() {
  var prevClass;
  $('span.film-date').each(function() {
    var index = $(this).index();
    if( index ) {
      if( this.className === prevClass ) {
        $(this).append( $(this).next() ).remove();
      } else {
        prevClass = this.className;
      }
    } else {
      prevClass = this.className;
    }
  });
});
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<div class="film-time-list">
  <span class="film-date Wed29May">Wed 29 May</span>
  <a class="film-tickets" href="#">2.30pm</a>
  <span class="film-date Wed29May">Wed 29 May</span>
  <a class="film-tickets" href="#">5.20pm</a>
  <span class="film-date Thur30May">Thur 30 May</span>
  <a class="film-tickets" href="#">2.30pm</a>
  <span class="film-date Thur30May">Thur 30 May</span>
  <a class="film-tickets" href="#">5.20pm</a>
</div>

In a case where the span elements are not in order, the following can be used:

$(function() {
  var prevClass = [];
  $('span.film-date').each(function() {
    var index = $(this).index();
    if( index ) {
      if( $.inArray(this.className, prevClass) !== -1 ) {
        $(this).append( $(this).next() ).remove();
      } else {
        prevClass.push( this.className );
      }
    } else {
      prevClass.push( this.className );
    }
  });
});
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <div class="film-time-list">
      <span class="film-date Wed29May">Wed 29 May</span>
      <a class="film-tickets" href="#">2.30pm</a>
       <span class="film-date Thur30May">Thur 30 May</span>
      <a class="film-tickets" href="#">2.30pm</a>
     <span class="film-date Wed29May">Wed 29 May</span>
      <a class="film-tickets" href="#">5.20pm</a>
      <span class="film-date Thur30May">Thur 30 May</span>
      <a class="film-tickets" href="#">5.20pm</a>
    </div>

Upvotes: 0

Lain
Lain

Reputation: 3726

First I would get all elements by the base class. Then I would join the full class of those elements and remove all duplicates.

;window.onload = function(){
  //REM: Looping through all .film-date elements
  for(var tListOfSpans = document.querySelectorAll('.film-date'), i=tListOfSpans.length-1; i>=0; i--){
    var tSelector = '.' + tListOfSpans[i].className.split(' ').join('.');

    //REM: Removing all but the first .film-date plus whatever class elements but the first
    for(var tListOfSelects = document.querySelectorAll(tSelector), j=tListOfSelects.length-1; j>0; j--){
      tListOfSelects[j].parentNode.removeChild(tListOfSelects[j])
    }
  }
};
<div class="film-time-list">
  <span class="film-date Wed29May">Wed 29 May</span>
  <a class="film-tickets" href="#">2.30pm</a>
  <span class="film-date Wed29May">Wed 29 May</span>
  <a class="film-tickets" href="#">5.20pm</a>
  <span class="film-date Thur30May">Thur 30 May</span>
  <a class="film-tickets" href="#">2.30pm</a>
  <span class="film-date Thur30May">Thur 30 May</span>
  <a class="film-tickets" href="#">5.20pm</a>
</div>

Edit:

The HTML of the question changed. Hence I changed mine accordingly.

Upvotes: 2

Rory McCrossan
Rory McCrossan

Reputation: 337560

To achieve what you require you could loop through the span elements checking if the text is the same as the previous element, and if so, remove it:

var prev;
$('.film-time-list span').each(function() {
  var text = $(this).text().trim();
  if (prev == text)
    $(this).remove();
  
  prev = text;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="film-time-list">
  <span class="film-date Wed29May">Wed 29 May</span>
  <a class="film-tickets" href="#">2.30pm</a>
  <span class="film-date Wed29May">Wed 29 May</span>
  <a class="film-tickets" href="#">5.20pm</a>
  <span class="film-date Thur30May">Thur 30 May</span>
  <a class="film-tickets" href="#">2.30pm</a>
  <span class="film-date Thur30May">Thur 30 May</span>
  <a class="film-tickets" href="#">5.20pm</a>
</div>

Upvotes: 4

Related Questions