Hide container based on duplicate dynamic class child using jQuery and CSS

Question

How can I hide an element if it contains a child has a class which has already occurred?

So all containers that have a child with the class "child*" which has already occurred would be hidden

So in this example, the second and fifth containers would be hidden. I know their class will start with child" but I don't know what the remainder of class will be.

<div class="container">
  <div class="child.65">
  </div>
</div>

 <div class="container">
  <div class="child.65">
  </div>
</div>

 <div class="container">
  <div class="child.11">
  </div>
</div>

<div class="container">
  <div class="child.47">
  </div>
</div>

<div class="container">
  <div class="child.11">
  </div>
</div>

To summarize, how do I hide a container a duplicate class of which I only know the first string of characters?

Are your containers all nested, or are you missing some `` elements? — Rory McCrossan, Jul 19 '17 at 15:42
Updated to fix HTML typo to fix validity. I have not tried to do it with Jquery yet. Is possible with just CSS? — Sam, Jul 19 '17 at 15:48
Write valid HTML please. What do you mean by "I know their class will start with child but I don't know what the remainder of class will be." it appears to me that you will need nth-child() pseudoelement to target specific elements and hide them. — Julian Espinosa, Jul 19 '17 at 15:48
@JulianEspinosa how is the HTML invalid? The first part of the class will "child" but I don't know what will happen after that — Sam, Jul 19 '17 at 15:49

score 1 · Answer 1 · answered Jul 19 '17 at 15:52

To make this work you can loop through each .container > div element, then select all the other elements that share the same class, and remove all but the first of them. Something like this:

$('.container > div').each(function() {
  $('.' + this.className.replace('.', '\\.')).not(':first').parent().hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="child.65">first 65</div>
</div>
<div class="container">
  <div class="child.65">second 65</div>
</div>
<div class="container">
  <div class="child.11">first 11</div>
</div>
<div class="container">
  <div class="child.47">first 47</div>
</div>
<div class="container">
  <div class="child.11">second 11</div>
</div>

Note that the logic could be made much cleaner and faster through the use of data attributes on the .container elements themselves to define the groups - assuming you are able to amend the existing HTML structure.

score 0 · Answer 2 · answered Jul 19 '17 at 15:57

There are many ways to do it in JS or JQuery. Here is the pure javascript solution.

var divs = document.getElementsByTagName("div");
var child_list = [];
for(var i=0; i<divs.length; i++){
  if(divs[i].className.indexOf("child")>-1){
    var className = divs[i].className;
    var number = parseInt(className.substr(className.indexOf(".")+1, className.length));
    if(child_list.indexOf(number)>-1){
      divs[i].style.display="none";
    } else {
      child_list.push(number);
    }
  }
}

<div class="container">
  <div class="child.65">
  1. child.65
  </div>
</div>

 <div class="container">
  <div class="child.65">
    2. Child.65
  </div>
</div>

 <div class="container">
  <div class="child.11">
  3. Child.11
  </div>
</div>

<div class="container">
  <div class="child.47">
  4. Child.47
  </div>
</div>

<div class="container">
  <div class="child.11">
  5. child.11
  </div>
</div>

DIEGO CARRASCAL · Accepted Answer · 2017-07-19T17:12:36.663

0

There are many ways to achieve the same, this comes from the top of my head:

var arr = [];
$(".container").each(function(){
    $(this).children("div[class^='child']").each(function){
      if(arr.indexOf($(this).attr("class"))>(-1)){
         $(this).hide();
      }
      else{
         arr.push($(this).attr("class"));
      }
    });
});

edited Jul 19 '17 at 17:12

answered Jul 19 '17 at 16:09

DIEGO CARRASCAL

1,999
14
16

Does this take in to account only children with the class "child*" ? – Sam Jul 19 '17 at 16:15
@Sam now it does, div with class starting by "child" [like in this answer](https://stackoverflow.com/questions/2178416/using-starts-with-selector-on-individual-class-names) – DIEGO CARRASCAL Jul 19 '17 at 17:09

Hide container based on duplicate dynamic class child using jQuery and CSS

3 Answers3