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.

try it (remove html()) $("#dataTables-example > tbody").clone().find('input').removeClass('pickupDiv').end().html(); — Balachandran
– Balachandran, Commented Jul 14, 2015 at 6:15
@MaxZoom r is a normal html content like "<table><tr><td class='cell'>Example</td></tr></table>". I need to remove the class cell. — rekha s
– rekha s, Commented Jul 14, 2015 at 6:20

empiric · Accepted Answer · 2015-07-14 08:17:48Z

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.

edited Jul 14, 2015 at 8:17

answered Jul 14, 2015 at 6:20

empiric

7,8767 gold badges40 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

rekha s Over a year ago

Thanks.This works.I have to replace input to div.How to remove all occurence of the same class.

empiric Over a year ago

@rekhas Do you want to remove a specific class in the whole table?

rekha s Over a year ago

I want to remove all the class

rekha s Over a year ago

Thanks.It is working. I have one more doubt.I need to pass this html content via form submit.So I convert this to html encode But only one row is showing.

rekha s Over a year ago

Hi, Only one row is showing after cloning the html content.

|

Collectives™ on Stack Overflow

Jquery Remove class from html content

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related