How to remove rows from a table where this table is nested.

How to remove rows from a table where this table is nested.

I have a Primefaces component rendering HTML. I do not have anyway of controlling (requesting) the primefaces object not to render unwanted elements. So now I am trying to remove unwanted items rendered from the HTML file using jQuery.

Many of these components rendered do not have IDs. For example, the following is a partial code I am getting rendered.

<html>

......

<div class="ui-widget ui-organigram rightLineStyle lineStyle" id="form:organigram"><div class="target" id="form:organigram_target">

<div class="target" id="form:organigram_target">

<table border="0" cellSpacing="0" cellPadding="0">

<tbody>

 <tr>...</tr>

 <tr>...</tr>

 <tr>...</tr>

 <tr>                               <--Issue Starts Here -->

     <td colSpan="2">

         <table border="0">

           <tbody>

              <tr>...</tr>

              <tr>...</tr>

              <tr>...</tr>

              <tr>...</tr>

           </tbody>

         </table>

     </td>

     <td colSpan="2">...<td>

    <td colSpan="2">...<td>

    <td colSpan="2">...<td>

    <td colSpan="2">...<td>

    <td colSpan="2">...<td>

  </tr>

</tbody>

.....

....

.....

</html>

In the above HTML code,  <td colSpan="2">...<td>  (in blue)is rendered several times as you can see. Then each <td colSpan="2">...<td> has a table inside and each of these tables has four <tr>..</tr>. (in red)

What I want to do is using Jquery to delete the last three <tr>..</tr> in every inner table starting from the <tr> where indicated as  <--Issue Starts Here -->