Jquery Remove class from html content

Question

am printing the table content with TCPDF. For that, I need to get the html content of the table and remove all the class in it.

I am using the following code

 var r=$("#dataTables-example").html();
 var copylast = $("#dataTables-example > tbody").html().clone().find('input').removeClass('pickupDiv').end().html();

But this is not working.

<tr class="gradeX odd" role="row">
  <td data-bind="text:booking_date" class="sorting_1">03/03/2015 04:58 AM</td>
  <td data-bind="text:ride_id">142-5358708</td>
  <td data-bind="text:pickup_time">06/03/2015 10:30 AM</td>
  <td>
    <div class="pickupDiv">
      <div class="pickupIcon"></div>
      <div class="pickupLine"></div>
    </div> <span class="locations" data-bind="text:pickup_address">Address</span>

    <div class="locationDivider"></div>
    <div class="pickupDiv">
      <div class="dropLine"></div>
      <div class="dropIcon"></div>
    </div> <span class="locations" data-bind="text:destination_address">-</span>

  </td>
  <td data-bind="text:driver_name+driver_id_nbr">-</td>
  <td data-bind="text:driver_phone">-</td>
  <td data-bind="text:vehicle_type">Car</td>
  <td data-bind="text:status">Created</td>
</tr>
<tr class="gradeX even" drole="row">
  <td data-bind="text:booking_date" class="sorting_1">03/03/2015 06:17 PM</td>
  <td data-bind="text:ride_id">1212</td>
  <td data-bind="text:pickup_time">03/03/2015 06:17 PM</td>
  <td>
    <div class="pickupDiv">
      <div class="pickupIcon"></div>
      <div class="pickupLine"></div>
    </div> <span class="locations" data-bind="text:pickup_address">Address </span>

    <div class="locationDivider"></div>
    <div class="pickupDiv">
      <div class="dropLine"></div>
      <div class="dropIcon"></div>
    </div> <span class="locations" data-bind="text:destination_address">-</span>

  </td>
  <td data-bind="text:driver_name+driver_id_nbr">Jones William( 1112 )</td>
  <td data-bind="text:driver_phone">(217) 251-5678</td>
  <td data-bind="text:vehicle_type">Car</td>
  <td data-bind="text:status">Created</td>
</tr>
<tr class="gradeX odd" role="row">
  <td data-bind="text:booking_date" class="sorting_1">03/03/2015 06:55 PM</td>
  <td data-bind="text:ride_id">645654</td>
  <td data-bind="text:pickup_time">03/03/2015 06:55 PM</td>
  <td>
    <div class="pickupDiv">
      <div class="pickupIcon"></div>
      <div class="pickupLine"></div>
    </div> <span class="locations" data-bind="text:pickup_address">Address </span>

    <div class="locationDivider"></div>
    <div class="pickupDiv">
      <div class="dropLine"></div>
      <div class="dropIcon"></div>
    </div> <span class="locations" data-bind="text:destination_address">-</span>

  </td>
  <td data-bind="text:driver_name+driver_id_nbr">-</td>
  <td data-bind="text:driver_phone">-</td>
  <td data-bind="text:vehicle_type">Car</td>
  <td data-bind="text:status">Accepted By Driver</td>
</tr>
<tr class="gradeX even" data-bind="click:$root.editUser" role="row">
  <td data-bind="text:booking_date" class="sorting_1">03/03/2015 07:05 PM</td>
  <td data-bind="text:ride_id">142-5389744</td>
  <td data-bind="text:pickup_time">03/03/2015 07:05 PM</td>
  <td>
    <div class="pickupDiv">
      <div class="pickupIcon"></div>
      <div class="pickupLine"></div>
    </div> <span class="locations" data-bind="text:pickup_address">835 North Michigan Avenue  Chicago, IL 61110</span>

    <div class="locationDivider"></div>
    <div class="pickupDiv">
      <div class="dropLine"></div>
      <div class="dropIcon"></div>
    </div> <span class="locations" data-bind="text:destination_address">640 North Wells Street, Chicago, IL 60654, United States  ,  </span>

  </td>
  <td data-bind="text:driver_name+driver_id_nbr">-</td>
  <td data-bind="text:driver_phone">-</td>
  <td data-bind="text:vehicle_type">Car</td>
  <td data-bind="text:status">Created</td>
</tr>
<tr class="gradeX odd" data-bind="click:$root.editUser" role="row">
  <td data-bind="text:booking_date" class="sorting_1">03/03/2015 07:05 PM</td>
  <td data-bind="text:ride_id">142-5389778</td>
  <td data-bind="text:pickup_time">03/03/2015 07:05 PM</td>
  <td>
    <div class="pickupDiv">
      <div class="pickupIcon"></div>
      <div class="pickupLine"></div>
    </div> <span class="locations" data-bind="text:pickup_address">South Canal Street  Chicago, IL 56789</span>

    <div class="locationDivider"></div>
    <div class="pickupDiv">
      <div class="dropLine"></div>
      <div class="dropIcon"></div>
    </div> <span class="locations" data-bind="text:destination_address">-</span>

  </td>
  <td data-bind="text:driver_name+driver_id_nbr">-</td>
  <td data-bind="text:driver_phone">-</td>
  <td data-bind="text:vehicle_type">Car</td>
  <td data-bind="text:status">Created</td>
</tr>

When I clone this, I get only first tr.Please help.

Answer 1

.html() will give you a string. But .clone() can only be called on a set of elements respectively a jQuery-object.

So you have to do something like this:

var $tbody = $("#dataTables > tbody").clone();
$tbody.find('tr').find('*').removeClass('pickupDiv');

Demo

Note: This approach can be slow if you have a large html-markup.