Jquery Filter Row By Condition

I have a page containing multiple tabs per region. Each row in the table has a class with each region that its impacted by. ...

Solution 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();

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><table><tbody><trclass="americas emea"><td>americas emea</td></tr><trclass="apac"><td>apac</td></tr><trclass="emea"><td>emea</td></tr><trclass="americas"><td>americas</td></tr><trclass="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 arrayfor (var i = 0, len = classes.length; i < len; i++) {
    if (regions.indexOf(classes[i]) > -1) {
      foundClasses.push(classes[i]);
    }
  }
  return foundClasses.length < 2;
}).remove();

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><table><tbody><trclass="americas emea"><td>americas emea</td></tr><trclass="apac"><td>apac</td></tr><trclass="emea"><td>emea</td></tr><trclass="americas"><td>americas</td></tr><trclass="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().

Solution 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">
    <trregions="apac emea"><td>first row do not remove</td></tr><trregions="apac emea"><td>second row do not remove</td></tr><trregions="apac"><td>third will be removed</td></tr><trregions="apac emea americas"><td>fourth will be remove</td></tr><trregions="apac emea"><td>fifth row do not remove</td></tr><trregions="apac emea americas"><td>sixth will be removed</td></tr><trregions="apac"><td>seventh will be removed</td></tr><trregions="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/