CODEWITHSUNDEEP
jquery
ultrarun
ultrarun

Reputation: 274

JQuery removing duplicates restricted to outer container

I'm using the jQuery to remove any duplications of the contents of the text within the span as I only want the first instance of 'My Movie' within the outer .film-time-list and would like the span with the duplicates deleted. However the jQuery is deleting everything from the next level .film-time-list down as it obviously sees it as a duplicate too. I've played about with .closest() but no joy.

I'm getting:

Sat 20 Jul 2019

My Movie 12.00pm 13.00pm

Sun 21 Jul 2019

12.00pm 13.00pm (title missing here)

But I want:

Sat 20 Jul 2019

My Movie 12.00pm 13.00pm

Sun 21 Jul 2019

My Movie 12.00pm 13.00pm

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){         
  var prev;
  $('.film-time-list span').each(function() {
  var text = $(this).text().trim();
  if (prev == text)
      $(this).remove();
      prev = text;
  });
});         
</script>
</head>
<body>
    <div class="film-time-list">
        <h3>Sat 20 Jul 2019</h3>
        <br>
        <div class="container">
            <span class="diary-film-name">
                <a href="#">My Movie</a>
            </span>
            <a class="#">12.00pm</a>
    </div>
       <br>
       <div class="container">
            <span class="diary-film-name">
                <a href="#">My Movie</a>
            </span>
            <a class="#">12.00pm</a>
    </div>
<br>
</div>  
 <div class="film-time-list">
        <h3>Sun 21 Jul 2019</h3>
        <br>
        <div class="container">
            <span class="diary-film-name">
                <a href="#">My Movie</a>
            </span>
            <a class="#">12.00pm</a>
    </div>
       <br>
       <div class="container">
            <span class="diary-film-name">
                <a href="#">My Movie</a>
            </span>
            <a class="#">12.00pm</a>
       </div>
       <br>
    </div>  
  </body>
</html>

Upvotes: 0

Views: 36

Answers (2)

gaetanoM
gaetanoM

Reputation: 42054

You can use use :first-of-type selector plus .appendTo() (updated jsfiddle is here):

$('.film-time-list .container:first-of-type').each(function () {
    var next = $(this).nextAll('.container');
    if ($(this).find('span').text().trim() == next.find('span').text().trim()) {
        next.find('a:last').appendTo(this);
        next.remove();
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="film-time-list">
    <h3>Sat 20 Jul 2019</h3>
    <br>

    <div class="container">
        <span class="diary-film-name"><a href="#">My Movie</a></span>
        <a class="#">12.00pm</a>
    </div>
    <br>

    <div class="container">
        <span class="diary-film-name"><a href="#">My Movie</a></span>
        <a class="#">13.00pm</a>
    </div>
    <br>
    <br>
</div>
<div class="film-time-list">
    <h3>Sun 21 Jul 2019</h3>
    <br>

    <div class="container">
        <span class="diary-film-name"><a href="#">My Movie</a></span><a class="#">12.00pm</a>
    </div>
    <br>

    <div class="container">
        <span class="diary-film-name"><a href="#">My Movie</a></span>
        <a class="#">13.00pm</a>
    </div>
    <br>
</div>

Upvotes: 1

borbesaur
borbesaur

Reputation: 691

Right now you're checking to see if they have the same text. Just check if they have the same text and also the same parent element

$('.film-time-list span').each(function() {

    var prev;
    var prevDiv;

    var text = $(this).text().trim();

    if ( prev == text && $(this).parent() == prevDiv.parent() ))
    $(this).remove();
    prev = text;
    prevDiv = $(this);
    });

});   ```

Upvotes: 0

Related Questions