Check if row contains string

Question

I'm writing a chrome extension to remove rows from a table that contain certain text. Right now this work, but the text has to be exact. I want to make it so if the text contains a string (and make it non case sensitive). How about would I go about doing so? i.e I want to search for "return" and if it's "ReTurn Tracker" it will remove it.

function removeRows(tableID, searchString){
    $("#"+ tableID +" tr td:contains('" + searchString + "')").each(function() {
        if ($(this).text() == searchString) {
            $(this).parent().remove();
        }
    });
}

Answer 1

• First get all tds to filter
  $("#"+ tableID +" tr td")
  if you test searchString.toLowerCase) here, it'll only grab lower-cased td.
• loop through them with
  .each(function() { });
• test if
  $(this).text().toLowerCase().indexOf(searchString.toLowerCase()) >= 0
• and remove parent
  $(this).parent().remove();

code:

run fiddle and remove the commented removeRows() function at the bottom.

$(document).ready(function() {
  function removeRows(tableID, searchString){
      $("#"+ tableID +" tr td").each(function() {
          if($(this).text().toLowerCase().indexOf(searchString.toLowerCase()) >= 0) {
              $(this).parent().remove();
          }
      });
  }
  
  // removeRows('test-table', 'row'); // uncomment this code (and run again)!
});

tr:nth-child(even) {
  background: white;
  text-align: center;
}
tr:nth-child(odd) {
  background: lightblue;
  text-align: center;
}
thead tr th {
  background-color: black;
  color: white;
}
table {
  background: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="test-table">
  <thead>
    <tr>
      <th>Header content 1</th>
      <th>Header content 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Body content 1</td>
      <td>Body content 2</td>
    </tr>
    <tr>
      <td>Body content 3</td>
      <td>Body content 4</td>
    </tr>
    <tr>
      <td>delete row</td>
      <td>Body content</td>
    </tr>
    <tr>
      <td>Body content 5</td>
      <td>Body content 6</td>
    </tr>
    <tr>
      <td>Body content 7</td>
      <td>Body content 8</td>
    </tr>
    <tr>
      <td>Body content 9</td>
      <td>Body content 10</td>
    </tr>
    <tr>
      <td>Body content</td>
      <td>and this row</td>
    </tr>
    <tr>
      <td>Body content 11</td>
      <td>Body content 12</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Footer content 1</td>
      <td>Footer content 2</td>
    </tr>
  </tfoot>
</table>

Answer 2

Here is a version without jQuery. I have updated this from my original answer so that one may specify a deep or shallow search for text by passing in an optional 3rd parameter.

function removeRows(id, search, deep){
  // -----------------------------
  // We want to ensure case insensitivity
  // -----------------------------
  var searchString = search.toLowerCase();
  // -----------------------------

  // -----------------------------
  // Find the direct cells of this table.
  // -----------------------------
  var cells = document.querySelectorAll(id + " > tbody > tr > td");
  // -----------------------------

  for (var i = 0; i< cells.length; i++){
    var thisCell = cells[i];

    // -----------------------------
    // find the correct text in this cell (shallow or deep)
    // -----------------------------
    var cellText = (function(thisCell, deep){
      // -----------------------------
      // if deep is requested just use innerText and be done with
      // remember this is case insensitive...
      // -----------------------------
      if (deep) { return thisCell.innerText.toLowerCase(); }
      // -----------------------------
      
      // -----------------------------
      // if deep is not requested (or unspecified) we will search for
      // text node children and ignore the rest of the children in the search
      // -----------------------------
      var strings = [];
      var child = thisCell.firstChild;
      while (child){
        if (child.nodeType == 3) { strings.push(child.data); }
        child = child.nextSibling;
      }
      
      return strings.join(" ").toLowerCase();
      // -----------------------------

    })(thisCell, deep);
    // -----------------------------
    
    // -----------------------------
    // Finally, if the search text is found within this cell's text
    // then we will remove this cell's parent.
    // -----------------------------
    if (cellText.indexOf(searchString) != -1 ) {
      var cellParent = thisCell.parentNode;
      cellParent.parentNode.removeChild(cellParent);
    }
    // -----------------------------

  }
}

removeRows("#target", "a");
removeRows("#target2", "a", false);
removeRows("#target3", "a", true);

table{
  background-color: aliceblue;
  border: solid 1px;
  margin: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="target">
  <tr><td>Abcd</td><td>efgh</td></tr>
  <tr><td>dfsjkl</td><td>Anop</td></tr>
  <tr><td>dsfjkl</td><td>mnop</td></tr>
</table>

<table id="target2">
  <tr><td>Abcd</td><td>efgh</td></tr>
  <tr><td>dfsjkl</td><td>Anop</td></tr>
  <tr>
    <td>
      <table id="target2b">
        <tr><td>Abcd</td><td>efgh</td></tr>
        <tr><td>dfsjkl</td><td>Anop</td></tr>
        <tr><td>dsfjkl</td><td>mnop</td></tr>
      </table>
    </td>
    <td>mnop</td>
  </tr>
  <tr><td>dsfjkl</td><td>mnop</td></tr>
</table>

<table id="target3">
  <tr><td>Abcd</td><td>efgh</td></tr>
  <tr><td>dfsjkl</td><td>Anop</td></tr>
  <tr>
    <td>
      <table id="target3b">
        <tr><td>Abcd</td><td>efgh</td></tr>
        <tr><td>dfsjkl</td><td>Anop</td></tr>
        <tr><td>dsfjkl</td><td>mnop</td></tr>
      </table>
    </td>
    <td>mnop</td>
  </tr>
  <tr><td>dsfjkl</td><td>mnop</td></tr>
</table>