Search a table without removing collapsed rows

Question

so basically I have a table, and I'm using the search of list.js to search the table. I'm also highlighting the results with mark.js. You can see a working version in the following link.

<tbody class="list context">
    <tr class="parent">
      <td class="name">Abraham</td>      
      <td class="city foo" data-foo="foo bar">Stockholm</td>
      <td><button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample1" aria-expanded="false" aria-controls="collapseExample">+</button></td>
    </tr>
    <tr class="child">
      <td class="collapse" colspan="3" id="collapseExample1">
        foo bar
      </td>
    </tr>
</tbody

CodePen

Ok so the .child row is collapsible by clicking on the button. Now when i search for "Abraham", it removes the adjacent .child row. Here is what needs to happen: Show me every .parent row, if it matches the searchinput, but dont remove the .child, even if it doesnt match the input.

Show me every "parentrow", even if it doesnt match the input BUT the collapsed "childrow" does match.

Only remove "parent- and childrow" if neither of them matches the input.

I don't even know if my approach is the correct way to do this, it sure does feel hacky, so I'm open for other ideas aswell.

Greetings KDB