Question

I have a table like this:

<div id="evttbldiv">
      <table id="eventtbl">
          <tr class="headers">
            <th>Evento</th>
            <th>Artista(s)</th>
            <th>Local</th>
            <th>Data</th>
            <th></th>
          </tr>
        <tr class="rowdata">
          <td class="lfm_event"></td>
          <td class="lfm_artists"></td>
          <td class="lfm_venue"></td>
          <td class="lfm_date"></td>
          <td><div class="arrow"></div></td>
        </tr>
        <tr class="rowinfo">
            <td colspan="5">
              hello
            </td>
        </tr>
      </table>
    </div>

My JQuery:

container = $('#evttbldiv').html();
    console.log(container);
    $('.headers', container).remove();
    console.log(container);

What I’d like to do is remove the header row and place the rest (everything in between <tr class="rowdata"> and the last trin the container variable. However, it’s not removing the headers in my JQuery, even with that line of code.

console.log(container) is displaying the same output in both instances.

Answer 1

The problem is that you’re trying to use jQuery to affect the DOM of the item after you’ve converted it to HTML. Instead, clone() it, remove() the .header, and then convert it to HTML:

container = $('#evttbldiv').clone();
$('.headers', container).remove();
console.log(container);

// And if you need the HTML...
container_html = container.html();
console.log(container_html);

Fiddle: http://jsfiddle.net/mstauffer/98XMj/1/