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

Removing HTML DOM elements from a string using JavaScript: A step-by-step guide

Hey there, I'm currently working on my angular application. When it comes to inserting the first 100 characters of content into the "description" meta tag for Facebook sharing, I've run into an issue. The description ends up including the HTML el ...

javascripthtmlangularjsdommeta-tags

Display or conceal numerous WTForm labels

Is there a more efficient way to hide/show multiple wtform labels? Currently, I am achieving this with the following code: HTML: {{ render_field(var_1, class = "class_1") }} {{ render_field(var_2, class = "class_1") }} {{ render_field(var_3, class = " ...

jqueryhtmlclasswtforms

Having issues with my CodePen React code and its ability to display my gradient background

I will provide detailed descriptions to help explain my issue. Link to CodePen: https://codepen.io/Yosharu/pen/morErw The problem I am facing is that my background (and some other CSS elements) are not loading properly in my code, resulting in a white bac ...

javascripthtmlcssreactjscodepen

CORS error causing Jquery ajax request to fail

I'm having an issue with my calendar and PHP file interaction. When I click on a day, I want to display the content from my PHP file, but I keep getting a 403 error message stating: "No 'Access-Control-Allow-Origin' header is present on the ...

phpjqueryajaxcors

Ensuring the selected date matches any consecutive dates within the dates array in Angular

Imagine if 01/01/2022 is chosen from the input field, and my array of dates looks something like this: ['31/12/2021', '01/11/2021', '02/01/2022'...] In this scenario, when '31/12/2021' and '02/01/2022' are ...

htmlangulartypescriptvalidation

Display multiple items from a JSON object in Django on the following page

I need to implement a feature that allows users to select multiple entries from a JSON object displayed in an HTML table. After selecting their entries and submitting, they should be redirected to a new page where only their chosen items are shown for conf ...

javascriptjquerydjangodjango-formsdjango-views

Encountering an error while trying to import GraphQL resolvers and schema

Upon attempting to start the server with the following setup, an error is encountered: Error: "createUser" defined in resolvers, but has an invalid value "function (userInput) {... The resolver's value must be of type object. index.ts const schema ...

javascriptnode.jsexpressgraphql

What steps do I need to take to create a custom image for a website?

I'm looking for a way to create a website image using just code, without the need for an actual image file or image tag. Is there a method to do this? Would I use CSS, Javascript, or HTML5 for this task? If using JavaScript to dynamically generate the ...

javascriptcsshtml

specialized html elements within data-ng-options

I have a code snippet where I am populating select options from a controller using data-ng-options. However, I would also like to include an icon with each option. For example, I want to append <span class="fa fa-plus"></span> at the end of e ...

javascriptjqueryhtmlangularjs

Deploy a web application using JavaScript and HTML to Heroku platform

I noticed that when I visit the Heroku dashboard, there is an option to create an app using Node.js, but not JavaScript. This raises a question for me - if I want to upload my locally created JavaScript/HTML5 app to Heroku, do I need to select Node.js or ...

javascriptnode.jsheroku

"Obtaining mouse coordinates in VueJS: A step-by-step guide

I am using a component that is activated by v-on:click="someMethod". Is there a way to retrieve the X and Y coordinates of the mouse click within this component? Extra context: The component I'm working with is an HTML5 Canvas element. ...

javascriptvue.jsvuejs2vue-component

Understanding the Class Syntax in Node.js

I'm having trouble understanding how to retrieve the value from a Node JS Class [Trying to use [Symbol.iterator '']]alert(Hello, ${this.name}!); Is there another way to approach this? class User { name = "Anonymous"; sayHi() { ...

javascriptmysqlnode.js

Using jQuery's "data" method to deselect a checkbox is a simple and effective way to toggle its state

I am currently utilizing jQuery version 1.7.1 My objective is to access multiple items on a webpage that contain the microdata attribute "data-prodid". Although I've been advised to utilize jQuery's "data" property, I'm encountering issues ...

jquery

Overflow of Div Content

I need a way to showcase a collection of around 30 links in a horizontal layout without the links wrapping to a new line if they exceed the width of the parent container. A horizontal scroll should appear for users to navigate through the overflowing links ...

htmlcssflexbox

Locating Undiscovered Users within mongodb

I have created a post collection where each user who marks a post as read has their user ID added to an array within the post document. Now, I am attempting to identify which users have not read certain posts by utilizing the $nin function while iteratin ...

javascriptnode.jsmongodbexpress

Creating tailored output data from a single table

Can you please assist me with a problem I am facing in generating output data using PHP and MySQL? Below is an image of my table: https://i.stack.imgur.com/zaieZ.png I would like the output to be displayed to the user in the following format: 1. Account ...

phphtmlmysql

Troubleshooting Issue: jQuery Scroll Feature Unresponsive

I'm having an issue with my website where it's not scrolling down when I click on an arrow. You can see the site here. Despite trying on different divs, nothing happens when I click. I've also tested it on other sections with no success. & ...

jqueryhtmldrop-down-menuresponsive-designscroll

Is the Bootstrap carousel sliding to the top after clicking the next and previous buttons?

Here is the carousel I created using Bootstrap: <div id="carouselExample" class="carousel slide d-none d-sm-none d-md-block" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active ...

htmlcssbootstrap-4carousel

Interacting with JQuery UI Button causes it to shift position on mouseover

In my table, there are two large cells. The left cell contains two drop-downs and a JQuery UI button that is causing trouble, while the right cell displays a list generated from an AJAX database query. As the list grows longer, the button gradually moves u ...

jqueryhtmlcssajax

ng-class in Angular seems to be functioning properly on <td> elements, but is not

When using this HTML inside an ng-repeat, there is a difference in behavior: This part works fine: <tr> <td ng-class="info.lastInMonth">{{ info.date_formatted }}</td> ... But this section does not work as expected: <tr ng ...

htmlcssangularjshtml-table