Conceal div elements containing identical information by utilizing jQuery

I'm dealing with a webpage that pulls in a long section of divs from another application. Unfortunately, I can't filter the divs before they appear, but I urgently need to hide any duplicate data within certain values using jQuery.

The duplicated divs will always be next to each other and only come in pairs (never more than two divs with the same data). However, there could be multiple pairs of duplicates on one page. In total, there will never be more than 25 .data-results divs on the page.

For example, in the lengthy code snippet provided below, since #a-2 and #a-3 have identical values for .data-one-result AND .data-two-result, I must completely hide one of those divs (either one works), while leaving #a-1 and #a-4 unchanged. The values in .data-three are irrelevant and will differ even within duplicate divs.

(edit: changed date-one to data-one due to a typo)

<div class="data-results" id="a-1">
  <div class="data-holder">

    <div class="data-one">
    <span class="data-one-label">One:</span>
    <span class="data-one-result">$50</span>
    </div>

    <div class="data-two">
    <span class="data-two-label">Two:</span>
    <span class="data-two-result">85</span>
    </div>

     <div class="data-three">
    <span class="data-three-label">Three:</span>
    <span class="data-thee-result">200</span>
    </div>

  </div>                                                                   
</div>

<div class="data-results" id="a-2">
  <div class="data-holder">

    <div class="data-one">
    <span class="data-one-label">One:</span>
    <span class="data-one-result">$50</span>
    </div>

    <div class="data-two">
    <span class="data-two-label">Two:</span>
    <span class="data-two-result">75</span>
    </div>

     <div class="data-three">
    <span class="data-three-label">Three:</span>
    <span class="data-thee-result">300</span>
    </div>       

  </div>                                                                   
</div>

<div class="data-results" id="a-3">
  <div class="data-holder">

    <div class="data-one">
    <span class="data-one-label">One:</span>
    <span class="data-one-result">$50</span>
    </div>

    <div class="data-two">
    <span class="data-two-label">Two:</span>
    <span class="data-two-result">75</span>
    </div>

    <div class="data-three">
    <span class="data-three-label">Three:</span>
    <span class="data-thee-result">400</span>
    </div>

  </div>                                                                   
</div>

<div class="data-results" id="a-4">
  <div class="data-holder">

    <div class="data-one">
    <span class="data-one-label">One:</span>
    <span class="data-one-result">$30</span>
    </div>

    <div class="data-two">
    <span class="data-two-label">Two:</span>
    <span class="data-two-result">75</span>
    </div>

    <div class="data-three">
    <span class="data-three-label">Three:</span>
    <span class="data-thee-result">500</span>
    </div>

  </div>                                                                   
</div>
javascriptjqueryhtmlcssduplicates

Answer №1

Here's a suggestion: You can loop through all the data-results divs and compare the results of the current div with the next div. If the results match, then hide the next div.

IMPORTANT - Please note that you have date-one and data-two where date-one should actually be changed to data-one for consistency in the code. I've written the code using date-one, so make sure to adjust it in your HTML code accordingly. 

$(function(){
  $('div.data-results').each(function(){
    if($(this).is(':visible'))
     {
        var $nextDiv = $(this).next('div.data-results');
        if($nextDiv.length > 0)
        {
           var thisResultOne = $(this).find('div.date-one .data-one-result').text();
           var nextResultOne = $nextDiv.find('div.date-one .data-one-result').text();
          
           var thisResultTwo = $(this).find('div.data-two .data-two-result').text();
           var nextResultTwo = $nextDiv.find('div.data-two .data-two-result').text();
          
           if(thisResultOne == nextResultOne && thisResultTwo == nextResultTwo)
          {
              $nextDiv.hide();
          }
        }
     }
    
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="data-results" id="a-1">
  <div class="data-holder">

    <div class="date-one">
    <span class="data-one-label">One:</span>
    <span class="data-one-result">$50</span>
    </div>

    <div class="data-two">
    <span class="data-two-label">Two:</span>
    <span class="data-two-result">85</span>
    </div>

     <div class="data-three">
    <span class="data-three-label">Three:</span>
    <span class="data-thee-result">200</span>
    </div>

  </div>                                                                   
</div>

<div class="data-results" id="a-2">
  <div class="data-holder">

    <div class="date-one">
    <span class="data-one-label">One:</span>
    <span class="data-one-result">$50</span>
    </div>

    <div class="data-two">
    <span class="data-two-label">Two:</span>
    <span class="data-two-result">75</span>
    </div>

     <div class="data-three">
    <span class="data-three-label">Three:</span>
    <span class="data-thee-result">300</span>
    </div>       

  </div>                                                                   
</div>

<div class="data-results" id="a-3">
  <div class="data-holder">

    <div class="date-one">
    <span class="data-one-label">One:</span>
    <span class="data-one-result">$50</span>
    </div>

    <div class="data-two">
    <span class="data-two-label">Two:</span>
    <span class="data-two-result">75</span>
    </div>

    <div class="data-three">
    <span class="data-three-label">Three:</span>
    <span class="data-thee-result">400</span>
    </div>

  </div>                                                                   
</div>

<div class="data-results" id="a-4">
  <div class="data-holder">

    <div class="date-one">
    <span class="data-one-label">One:</span>
    <span class="data-one-result">$30</span>
    </div>

    <div class="data-two">
    <span class="data-two-label">Two:</span>
    <span class="data-two-result">75</span>
    </div>

    <div class="data-three">
    <span class="data-three-label">Three:</span>
    <span class="data-thee-result">500</span>
    </div>

  </div>                                                                   
</div>

Answer №2

Utilize the each() and slice() functions to compare span values with preceding elements.

$('.data-holder > div').each(function(){
    var currElement = $(this);
    var index = $('.data-holder > div').index($(this))-1;
    var previousElements = $('.data-holder > div').slice( 0, index <= 0 ? 0 : index );
    console.log(previousElements);
    previousElements.each(function(){
        if(
           $('span',this).first().text() == $('span', currElement).first().text() && 
           $('span',this).last().text() == $('span', currElement).last().text()
        ){
           currElement.hide();
        }
    })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="data-results" id="a-1">
  <div class="data-holder">

    <div class="date-one">
    <span class="data-one-label">One:</span>
    <span class="data-one-result">$50</span>
    </div>

    <div class="data-two">
    <span class="data-two-label">Two:</span>
    <span class="data-two-result">85</span>
    </div>

     <div class="data-three">
    <span class="data-three-label">Three:</span>
    <span class="data-thee-result">200</span>
    </div>

  </div>                                                                   
</div>

<div class="data-results" id="a-2">
  <div class="data-holder">

    <div class="date-one">
    <span class="data-one-label">One:</span>
    <span class="data-one-result">$50</span>
    </div>

    <div class="data-two">
    <span class="data-two-label">Two:</span>
    <span class="data-two-result">75</span>
    </div>

     <div class="data-three">
    <span class="data-three-label">Three:</span>
    <span class="data-thee-result">300</span>
    </div>       

  </div>                                                                   
</div>

<div class="data-results" id="a-3">
  <div class="data-holder">

    <div class="date-one">
    <span class="data-one-label">One:</span>
    <span class="data-one-result">$50</span>
    </div>

    <div class="data-two">
    <span class="data-two-label">Two:</span>
    <span class="data-two-result">75</span>
    </div>

    <div class="data-three">
    <span class="data-three-label">Three:</span>
    <span class="data-thee-result">400</span>
    </div>

  </div>                                                                   
</div>

<div class="data-results" id="a-4">
  <div class="data-holder">

    <div class="date-one">
    <span class="data-one-label">One:</span>
    <span class="data-one-result">$30</span>
    </div>

    <div class="data-two">
    <span class="data-two-label">Two:</span>
    <span class="data-two-result">75</span>
    </div>

    <div class="data-three">
    <span class="data-three-label">Three:</span>
    <span class="data-thee-result">500</span>
    </div>

  </div>                                                                   
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Updating React state using a form input

Seeking assistance on retrieving form values and storing them in state. Despite following various guides (mostly in class style react), I keep encountering the same error: "Nothing was returned from render. This usually means a return statement is m ...

javascriptreactjsjsx

Include a query parameter each time a page is added to bookmarks

Is there a way to automatically add a query parameter to a page URL when bookmarked using Chrome? For example, if I bookmark https://www.example.com, can it be saved as https://www.example.com/?bookmarked? I'm thinking I might need to use JavaScript ...

javascripthtmltypescriptgoogle-chromebookmarklet

Go back to the previous operation

Utilizing ajax to verify if a username is available by checking the MySQL database. If the username is already taken, it will return false to the form submit function. index.php $("#register-form").submit(function(){ var un = $("#un").val(); $.aj ...

javascriptphpjquerymysqlajax

Angular is encountering a circular dependency while trying to access a property called 'lineno' that does not actually exist within the module exports

I am working on an Angular project and using the Vex template. My project utilizes Angular 9 and Node.js v15.2.0. Every time I run the project with the command ng serve -o, it displays a warning message. https://i.stack.imgur.com/8O9c1.png What could b ...

javascriptangulartypescript

Looking for assistance with aligning an image in a <td> cell that doubles as a link?

How can I center a play icon in the middle of a td cell and make the entire content clickable as a link, including the background image? I've tried various methods but can't seem to get it right without breaking the alignment. Any suggestions wou ...

htmlcss

I am unable to retrieve a list using Jquery's ajax function

Can someone please help me diagnose the issue with the code below and why it's not functioning properly? This code snippet is from a webmethod in an aspx.cs page. [webmethod] [ScriptMethod(ResponseFormat=ResponseFormat.Json)] public sta ...

c#jqueryasp.netajaxweb-services

Some IE and Chrome browsers experiencing issues with jplayer not playing MP3 files

Some devices are having trouble playing mp3 files through jPlayer from IceCast2, either experiencing delays or not working at all. The browsers affected are Chrome versions 49 and 50, as well as IE 11. About 75% of the tested computers, tablets, and phon ...

jquerygoogle-chromeinternet-explorermp3icecast

trigger an event once an element has completed cycling using cycle.js

Incorporating the cycle.js library for simple transitions between images: $(document).ready(function() { var first; var $slider = $(".trauringe"); $slider.cycle({ timeout: 8000, next: '#next', prev: '#prev' ...

javascriptjquery

Having difficulties injecting a Service into a TypeScript Controller

I recently started working with TypeScript and I created a controller where I need to inject a service in order to use its methods. However, I am facing an issue where I am unable to access the service functions and encountering an error. Error TypeError ...

javascriptangularjstypescripttypescript2.0

Assign a unique value to every line in a JSON string within the Vue.js hierarchy of components

I created a Vue component that initializes an empty list and an object like this: data: function(){ return { list: [], newThing: { body: '', }, }; }, The list is then populated with JSON data fetched ...

javascriptarraysjsonobjectvue.js

The method I used to position a triangle at the bottom border of a parent element with relative

https://i.stack.imgur.com/RZjJ9.png I am trying to achieve a centered triangle within a border, but I am facing a challenge due to the parent component being relative. When I remove the relative positioning, I struggle to position the triangle in the cent ...

htmlcssreactjsstyled-components

Using Knex to Generate a Migration Including a Foreign Key

I attempted to use the code from this link in order to create a foreign key: how to do knex.js migration However, an error occurred at this line of code: table.bigInteger('AddressId') .unsigned() .index() .inTable('Address&apos ...

javascriptsqlknex.js

Encountering the error message "Unable to access /" on the browser when using express router

Just started working with the express Router for the first time. Here is my route.js: var express = require('express'); var router = express.Router(); router.get('/', function(req, res) { res.send('home page'); }); module.e ...

javascriptnode.jsexpress

The functionality of Anchor `<a>` tags is compromised in Chrome when using the hashtag symbol (#)

Below is the code I have implemented on my website: <li><a href="/explore/#Sound">Sound</a></li> (This menu is visible on all pages) <a id="Sound"><a> (This is on the specific page where I want to link to) I have at ...

htmlgoogle-chromecross-browser

Tips for incorporating the "define" function into your Mocha testing

Starting my journey with JavaScript testing, I made the decision to use Mocha. The specific modules I am looking to test are AMD/RequireJS. However, it appears that Mocha only works with CommonJS modules. Consequently, when trying to run it, I encounter t ...

javascriptnode.jstestingmocha.js

Navigating the file paths for Vue.js assets while utilizing the v-for directive

Recently, I started working with Vue.js and found it simple enough to access the assets folder for static images like my logo: <img src="../assets/logo.png"> However, when using v-for to populate a list with sample data, the image paths se ...

javascriptimagevue.jsfilepathv-for

In CSS, when text within a tab div lacks spaces, it triggers a horizontal scrolling effect

My special css style for the div: .message-body { background: #5181a2; padding: 8px 5px; text-align: justify; } I aim to display this particular text inside the div similar to how 'hello hello' appears on the line above. ...

htmlcss

NextJS rendering props in a loop

I need help figuring out how to render props in a loop using the forEach function. This is my current code: {console.log('the catalog inside the component ----->', catalog)} {Object.keys(catalog).forEach(key => { return ( <d ...

javascriptnext.js

Contact Form Appears to Be Functioning Properly, Yet Emails Are Not Being Received (HTML5 & PHP)

Hello everyone, I need some assistance with creating a contact form. This is my first time working on this, and I am facing an issue. I am using HTML5, which I have some knowledge of, and PHP, which I am not very familiar with. When I try to test the form ...

phphtmlforms

Learn the step-by-step guide on integrating Angular 2 into Codeigniter 3

Currently, I am using Codeigniter 3x and have been using and learning it for a month. Now, I want to start learning a JavaScript framework like Angular, but I'm not sure how to install or use Angular in Codeigniter. Can anyone guide me on this? Is it ...

javascriptphpangularjscodeigniter