I have HTML like –

<table id="my_table">
<tr>
<td class="">
   <div class="main_row" style="position:relative;width:100%;height:auto;">
      <table class="table1" style="height:100%; width:100%;table-layout:fixed;">
         <tbody>
            <tr class="">
               <td style="width: 4%;" class="accordian"><i class="icon-angle-up"></i></td>
               <td class="td_left" style="width: 35%;text-align: left;">ABC</td>
               <td style="width: 15%">24</td>
            </tr>
            <tr>
               <td colspan="8" style="padding:0;height:0px;">
                  <div class="accordian_ads_data collapse" data-parent="#table1" style="height:0px;"></div>
               </td>
            </tr>
         </tbody>
      </table>
   </div>
</td>
<td>
   <div class="main_row" style="position:relative;width:100%;height:auto;">
      <table class="table1" style="height:100%; width:100%;table-layout:fixed;">
         <tbody>
            <tr class="">
               <td style="width: 4%;" class="accordian"><i class="icon-angle-up"></i></td>
               <td class="td_left" style="width: 35%;text-align: left;">XYZ</td>
               <td style="width: 15%">24</td>
            </tr>
            <tr>
               <td colspan="8" style="padding:0;height:0px;">
                  <div class="accordian_ads_data collapse" data-parent="#table1" style="height:0px;"></div>
               </td>
            </tr>
         </tbody>
      </table>
   </div>
</td>
<td>
   <div class="main_row" style="position:relative;width:100%;height:auto;">
      <table class="table1" style="height:100%; width:100%;table-layout:fixed;">
         <tbody>
            <tr class="">
               <td style="width: 4%;" class="accordian"><i class="icon-angle-up"></i></td>
               <td class="td_left" style="width: 35%;text-align: left;">DSA</td>
               <td style="width: 15%">24</td>
            </tr>
            <tr>
               <td colspan="8" style="padding:0;height:0px;">
                  <div class="accordian_ads_data collapse" data-parent="#table1" style="height:0px;"></div>
               </td>
            </tr>
         </tbody>
      </table>
   </div>
</td>
<td>
   <div class="main_row" style="position:relative;width:100%;height:auto;">
      <table class="table1" style="height:100%; width:100%;table-layout:fixed;">
         <tbody>
            <tr>
               <td style="width: 4%;" class="accordian"><i class="icon-angle-up"></i></td>
               <td class="td_left" style="width: 35%;text-align: left;">BDE</td>
               <td style="width: 15%">24</td>
            </tr>
            <tr>
               <td colspan="8" style="padding:0;height:0px;">
                  <div class="accordian_ads_data collapse" data-parent="#table1" style="height:0px;"></div>
               </td>
            </tr>
         </tbody>
      </table>
   </div>
</td>
</tr>

<tr>
<td class="">
   <div class="main_row" style="position:relative;width:100%;height:auto;">
      <table class="table1" style="height:100%; width:100%;table-layout:fixed;">
         <tbody>
            <tr class="">
               <td style="width: 4%;" class="accordian"><i class="icon-angle-up"></i></td>
               <td class="td_left" style="width: 35%;text-align: left;">ABC</td>
               <td style="width: 15%">24</td>
            </tr>
            <tr>
               <td colspan="8" style="padding:0;height:0px;">
                  <div class="accordian_ads_data collapse" data-parent="#table1" style="height:0px;"></div>
               </td>
            </tr>
         </tbody>
      </table>
   </div>
</td>
<td>
   <div class="main_row" style="position:relative;width:100%;height:auto;">
      <table class="table1" style="height:100%; width:100%;table-layout:fixed;">
         <tbody>
            <tr class="">
               <td style="width: 4%;" class="accordian"><i class="icon-angle-up"></i></td>
               <td class="td_left" style="width: 35%;text-align: left;">DSE</td>
               <td style="width: 15%">24</td>
            </tr>
            <tr>
               <td colspan="8" style="padding:0;height:0px;">
                  <div class="accordian_ads_data collapse" data-parent="#table1" style="height:0px;"></div>
               </td>
            </tr>
         </tbody>
      </table>
   </div>
</td>
<td>
   <div class="main_row" style="position:relative;width:100%;height:auto;">
      <table class="" style="height:100%; width:100%;table-layout:fixed;">
         <tbody>
            <tr class="">
               <td style="width: 4%;" class="accordian"><i class="icon-angle-up"></i></td>
               <td class="td_left" style="width: 35%;text-align: left;">WER</td>
               <td style="width: 15%">24</td>
            </tr>
            <tr>
               <td colspan="8" style="padding:0;height:0px;">
                  <div class=" collapse" data-parent="" style="height:0px;"></div>
               </td>
            </tr>
         </tbody>
      </table>
   </div>
</td>
<td>
   <div class="main_row" style="position:relative;width:100%;height:auto;">
      <table class="" style="height:100%; width:100%;table-layout:fixed;">
         <tbody>
            <tr>
               <td style="width: 4%;" class="accordian"><i class="icon-angle-up"></i></td>
               <td class="td_left" style="width: 35%;text-align: left;">BFD</td>
               <td style="width: 15%">24</td>
            </tr>
            <tr>
               <td colspan="8" style="padding:0;height:0px;">
                  <div class=" collapse" data-parent="" style="height:0px;"></div>
               </td>
            </tr>
         </tbody>
      </table>
   </div>
</td>
</tr>
</table>

Parent <table> has two <tr> elements, and each <tr> has 4 <td> elements. I want to remove all the <td> elements inside <tr> except first one. That is output of the HTML should be like –

<table id="my_table">
<tr>
<td class="">
   <div class="main_row" style="position:relative;width:100%;height:auto;">
      <table class="table1" style="height:100%; width:100%;table-layout:fixed;">
         <tbody>
            <tr class="">
               <td style="width: 4%;" class="accordian"><i class="icon-angle-up"></i></td>
               <td class="td_left" style="width: 35%;text-align: left;">ABC</td>
               <td style="width: 15%">24</td>
            </tr>
            <tr>
               <td colspan="8" style="padding:0;height:0px;">
                  <div class="accordian_ads_data collapse" data-parent="#table1" style="height:0px;"></div>
               </td>
            </tr>
         </tbody>
      </table>
   </div>
</td>
</tr>

<tr>
<td class="">
   <div class="main_row" style="position:relative;width:100%;height:auto;">
      <table class="table1" style="height:100%; width:100%;table-layout:fixed;">
         <tbody>
            <tr class="">
               <td style="width: 4%;" class="accordian"><i class="icon-angle-up"></i></td>
               <td class="td_left" style="width: 35%;text-align: left;">ABC</td>
               <td style="width: 15%">24</td>
            </tr>
            <tr>
               <td colspan="8" style="padding:0;height:0px;">
                  <div class="accordian_ads_data collapse" data-parent="#table1" style="height:0px;"></div>
               </td>
            </tr>
         </tbody>
      </table>
   </div>
</td>
</tr>
</table>

Tried to achieve this with something like –

$("#my_table").closest('tr').each (function() {
    $(this).closest('td:not(:first)').remove();
});

But, its not working.

Any help is appreciated. Thanks.

1

Can you try to use this way to remove your td elements?

var data = $("#my_table > tbody > tr").each(function() {
  $(this).children('td:not(:first)').remove()
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id="my_table">
  <tr>
    <td class="">
      <div class="main_row" style="position:relative;width:100%;height:auto;">
        <table class="table1" style="height:100%; width:100%;table-layout:fixed;">
          <tbody>
            <tr class="">
              <td style="width: 4%;" class="accordian"><i class="icon-angle-up"></i></td>
              <td class="td_left" style="width: 35%;text-align: left;">ABC</td>
              <td style="width: 15%">24</td>
            </tr>
            <tr>
              <td colspan="8" style="padding:0;height:0px;">
                <div class="accordian_ads_data collapse" data-parent="#table1" style="height:0px;"></div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </td>
    <td>
      <div class="main_row" style="position:relative;width:100%;height:auto;">
        <table class="table1" style="height:100%; width:100%;table-layout:fixed;">
          <tbody>
            <tr class="">
              <td style="width: 4%;" class="accordian"><i class="icon-angle-up"></i></td>
              <td class="td_left" style="width: 35%;text-align: left;">XYZ</td>
              <td style="width: 15%">24</td>
            </tr>
            <tr>
              <td colspan="8" style="padding:0;height:0px;">
                <div class="accordian_ads_data collapse" data-parent="#table1" style="height:0px;"></div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </td>
    <td>
      <div class="main_row" style="position:relative;width:100%;height:auto;">
        <table class="table1" style="height:100%; width:100%;table-layout:fixed;">
          <tbody>
            <tr class="">
              <td style="width: 4%;" class="accordian"><i class="icon-angle-up"></i></td>
              <td class="td_left" style="width: 35%;text-align: left;">DSA</td>
              <td style="width: 15%">24</td>
            </tr>
            <tr>
              <td colspan="8" style="padding:0;height:0px;">
                <div class="accordian_ads_data collapse" data-parent="#table1" style="height:0px;"></div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </td>
    <td>
      <div class="main_row" style="position:relative;width:100%;height:auto;">
        <table class="table1" style="height:100%; width:100%;table-layout:fixed;">
          <tbody>
            <tr>
              <td style="width: 4%;" class="accordian"><i class="icon-angle-up"></i></td>
              <td class="td_left" style="width: 35%;text-align: left;">BDE</td>
              <td style="width: 15%">24</td>
            </tr>
            <tr>
              <td colspan="8" style="padding:0;height:0px;">
                <div class="accordian_ads_data collapse" data-parent="#table1" style="height:0px;"></div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </td>
  </tr>

  <tr>
    <td class="">
      <div class="main_row" style="position:relative;width:100%;height:auto;">
        <table class="table1" style="height:100%; width:100%;table-layout:fixed;">
          <tbody>
            <tr class="">
              <td style="width: 4%;" class="accordian"><i class="icon-angle-up"></i></td>
              <td class="td_left" style="width: 35%;text-align: left;">ABC</td>
              <td style="width: 15%">24</td>
            </tr>
            <tr>
              <td colspan="8" style="padding:0;height:0px;">
                <div class="accordian_ads_data collapse" data-parent="#table1" style="height:0px;"></div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </td>
    <td>
      <div class="main_row" style="position:relative;width:100%;height:auto;">
        <table class="table1" style="height:100%; width:100%;table-layout:fixed;">
          <tbody>
            <tr class="">
              <td style="width: 4%;" class="accordian"><i class="icon-angle-up"></i></td>
              <td class="td_left" style="width: 35%;text-align: left;">DSE</td>
              <td style="width: 15%">24</td>
            </tr>
            <tr>
              <td colspan="8" style="padding:0;height:0px;">
                <div class="accordian_ads_data collapse" data-parent="#table1" style="height:0px;"></div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </td>
    <td>
      <div class="main_row" style="position:relative;width:100%;height:auto;">
        <table class="" style="height:100%; width:100%;table-layout:fixed;">
          <tbody>
            <tr class="">
              <td style="width: 4%;" class="accordian"><i class="icon-angle-up"></i></td>
              <td class="td_left" style="width: 35%;text-align: left;">WER</td>
              <td style="width: 15%">24</td>
            </tr>
            <tr>
              <td colspan="8" style="padding:0;height:0px;">
                <div class=" collapse" data-parent="" style="height:0px;"></div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </td>
    <td>
      <div class="main_row" style="position:relative;width:100%;height:auto;">
        <table class="" style="height:100%; width:100%;table-layout:fixed;">
          <tbody>
            <tr>
              <td style="width: 4%;" class="accordian"><i class="icon-angle-up"></i></td>
              <td class="td_left" style="width: 35%;text-align: left;">BFD</td>
              <td style="width: 15%">24</td>
            </tr>
            <tr>
              <td colspan="8" style="padding:0;height:0px;">
                <div class=" collapse" data-parent="" style="height:0px;"></div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </td>
  </tr>
</table>

Not the answer you’re looking for? Browse other questions tagged jquery or ask your own question.