jQuery Filter row by condition

Question

I have a page containing multiple tabs per region.

Each row in the table has a class with each region that its impacted by.

<tr class="apac emea americas">...</tr> <tr class="apac emea">...</tr>

When a tab is clicked, it filters out the table and removes anything where the condition is not met.

$('#' + tab).find("#trainingEvents .results tr:not(.Americas.EMEA.APAC)").remove(); <- This is the ALL tab

Each of the tabs is pretty easy to understand except for "Multiple" which is what my question relates to.

The condition needs to be, remove rows that do not contain 2 of the 3 possible regions. For example:

<tr class="amea apac"></tr> = True

<tr class="apac">...</tr> = False, Remove it

How can I accomplish this filter? Just needs to meet any 2 combinations of the 3 possible options

Answer 1

I'd suggest the following:

// collating the 'regions':
var regions = ['americas', 'emea', 'apac'],
// initialising an array to use, later:
    foundClasses = [];

// iterating over the 'tr' elements, filtering them:
$('tr').filter(function () {
    // using Array.prototype.forEach to filter the classList of the element:
    foundClasses = Array.prototype.filter.call(this.classList, function (c) {
        // 'c' is the current class in the classList we're iterating over,
        // if it's in the array we return that array to the 'foundClasses':
        if (regions.indexOf(c) > -1) {
            return c;
        }
    });
    // we keep the the element in the jQuery collection (of 'tr' elements),
    // if we have only 1 (or less...) classes found:
    return foundClasses.length < 2;
// removing those 'tr' elements:
}).remove();

var regions = ['americas', 'emea', 'apac'],
    foundClasses = [];

$('tr').filter(function () {
  foundClasses = Array.prototype.filter.call(this.classList, function (c) {
    if (regions.indexOf(c) > -1) {
      return c;
    }
  });
  return foundClasses.length < 2;
}).remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tbody>
        <tr class="americas emea">
            <td>americas emea</td>
        </tr>
        <tr class="apac">
            <td>apac</td>
        </tr>
        <tr class="emea">
            <td>emea</td>
        </tr>
        <tr class="americas">
            <td>americas</td>
        </tr>
        <tr class="apac emea">
            <td>apac emea</td>
        </tr>
    </tbody>
</table>

To account for those browsers without access to Array.prototype.filter(), and possibly element.classList:

var regions = ['americas', 'emea', 'apac'],
  classes,
  foundClasses = [];

    $('tr').filter(function() {
      // creating an array by splitting the className property by white-space:
      classes = this.className.split(/\s+/);
      // crudely emptying the initialised array:
      foundClasses = [];
      // iterating over the array of classes using a for-loop:
      for (var i = 0, len = classes.length; i < len; i++) {
        // if the current element in the classes array is in the
        // foundClasses array:
        if (regions.indexOf(classes[i]) > -1) {
          // we push the current class into the foundClasses array:
          foundClasses.push(classes[i]);
        }
      }
      // as above:
      return foundClasses.length < 2;
    }).remove();

var regions = ['americas', 'emea', 'apac'],
  classes,
  foundClasses = [];

$('tr').filter(function() {
  classes = this.className.split(/\s+/);
  foundClasses = []; // crudely emptying the array
  for (var i = 0, len = classes.length; i < len; i++) {
    if (regions.indexOf(classes[i]) > -1) {
      foundClasses.push(classes[i]);
    }
  }
  return foundClasses.length < 2;
}).remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr class="americas emea">
      <td>americas emea</td>
    </tr>
    <tr class="apac">
      <td>apac</td>
    </tr>
    <tr class="emea">
      <td>emea</td>
    </tr>
    <tr class="americas">
      <td>americas</td>
    </tr>
    <tr class="apac emea">
      <td>apac emea</td>
    </tr>
  </tbody>
</table>

References:

• JavaScript:
  • Array.prototype.indexOf().
  • Array.prototype.filter().
  • Array.prototype.push().
  • element.classList.
• jQuery:
  • filter().
  • remove().

Answer 2

You use for that the function "filter": (UPDATE after another requirement to filter it)

$("tr").
filter(function(index){
    var classes = $(this).attr("class").split(" ");
    var regions = "americas,emea,apac,";
    var counter = 0;
    for(var i = 0, j = classes.length;i < j;i++){
        if(regions.indexOf(classes[i] + ",") >= 0){counter++;}
    }
    return counter != 2;
})
.remove();

That code will remove all the rows with less or more than 2 region classes.

---

FIDDLE HAS BEEN UPDATED TOO: http://jsfiddle.net/fac5tapz/8/

---

If you were using a custom attribute, it would be possible to spare some code:

<table border="1">
    <tr regions="apac emea"><td>first row do not remove</td></tr>
    <tr regions="apac emea"><td>second row do not remove</td></tr>
    <tr regions="apac"><td>third will be removed</td></tr>
    <tr regions="apac emea americas"><td>fourth will be remove</td></tr>
    <tr regions="apac emea"><td>fifth row do not remove</td></tr>
    <tr regions="apac emea americas"><td>sixth will be removed</td></tr>
    <tr regions="apac"><td>seventh will be removed</td></tr>
    <tr regions="americas emea"><td>eighth row do not remove</td></tr>
</table>

$("tr").
filter(function(index){
    var regions = $(this).attr("regions").split(" ");
    return regions.length != 2;
})
.remove();

Another fiddle for this version: http://jsfiddle.net/dkseknyw/2/