Remove extra div in drupal_get_form

Question

I'm trying to show a form as follows:

drupal_get_form('_part_profile_add_record_form');

where,

function _part_profile_add_record_form() {
 $form = array();
    $form['#method'] = "post";
    $form['#name'] = 'part_profile_add_record';
    $form['#attributes']['enctype'] = 'multipart/form-data';

    $form['record'] = array(
        '#type' => 'fieldset',
        '#title' => t('Add a Participant Record fieldset'),
        '#prefix' => '<table id="part-record">',        
        '#suffix' => '</table>',
        '#collapsible' => TRUE,
        '#collapsed' => TRUE,
    );
    $form['record'] ['crs_ctr'] = array(
        '#type' => 'textfield',
        '#title' => t('Course Center '),
        '#prefix' => '<tr><td>',        
        '#suffix' => '</td>',
            //'#required' => TRUE,
    );

    $form['record'] ['roll'] = array(
        '#type' => 'textfield',
        '#title' => t('Roll No'),
        '#prefix' => '<td>',        
        '#suffix' => '</td></tr>',
    );

}

it works fine but shows extra div for this form. I can see this by viewing page source as follows:

<table id="part-record"><fieldset  class=" fieldset titled collapsible collapsed">
      <legend><span class='fieldset-title'><span class='icon'></span><a href="/bim/bim_2014/admin/participant#fieldset" class="active">Add a Participant Record fieldset</a></span></legend>
        <div class='fieldset-content clear-block '>
      <tr><td><div  class="form-item form-item-labeled" id="edit-crs-ctr-wrapper">
      <label  for="edit-crs-ctr">Course Center : </label>
    <input type="text" maxlength="128" name="crs_ctr" id="edit-crs-ctr" value="" class="form-text fluid" />  </div>
</td><td><div  class="form-item form-item-labeled" id="edit-crs-wrapper">
      <label  for="edit-crs">Course: </label>
    <input type="text" maxlength="128" name="crs" id="edit-crs" value="" class="form-text fluid" />  </div>
</td><td><div  class="form-item form-item-labeled" id="edit-roll-wrapper">
      <label  for="edit-roll">Roll No: </label>
    <input type="text" maxlength="128" name="roll" id="edit-roll" value="" class="form-text fluid" />  </div>
</td></tr>    </div>
  </fieldset>
</table>

However, in between the form tag, there's this empty div tag wrapping the input and lebel tags with some class. Its irritating cause I need to display the button inline. How do I remove that div??

Answer 1

To remove div wrapping label/input tags try this:

if ( $('.form-text').parent().is('div.form-item.form-item-labeled') ) {
    $('.form-text').unwrap();
}

To remove div wrapping tr

if ( $('tr').parent().is('div.fieldset-content') ) {
    $('tr').unwrap();
}