jQuery target td header attribute

Question

I have the following html

<table>
  <tr>
    <td headers="Monday"> <div class="foo"> Some stuff </div> </td>
    <td headers="Tuesday"> <div class="foo"> Some stuff </div> </td>
    <td headers="Wednesday"> <div class="foo"> Some stuff </div> </td>
  </tr>
</table>

How can I target the td with Monday headers and remove .foo?

Answer 1

Is this what you meant?

DEMO

if ($(".foo").text().indexOf('Monday') != -1) {
    $("td[headers='Monday']").find(".foofoo").remove();
}

Answer 2

You can remove class with something like this:

$('td[headers="Monday"] > div').removeClass('foo');

Demo: http://jsfiddle.net/8qbba/

Answer 3

$('div','td[headers=Monday]').remove();

Answer 4

Try this...

if($('.foo:contains("Monday")')){
    $('table').each(function(){
        var mondayHeader = $(this).find('tr.td[headers="Monday"]');
        $(mondayHeader).closest('div').removeClass('foofoo');
    });
}