CODEWITHSUNDEEP
jquery
AgainMe
AgainMe

Reputation: 780

Remove all specific classes inside a table

Hello I need to remove all the entry-selected class avaialable in my table rows. This is my html structure:

<table border='1' id='resource-container' style="margin-top: 10px; height: 396px; width: 100%;">
                <tr id="res-1" class='entry entry-selected'><td style="background-color:#FFCCC2" class="resource-color">&nbsp;&nbsp;</td><td style="padding-left: 10px"><div><strong>foo</strong><br>test</div></td></tr>
                <tr id="res-1" class='entry'><td style="background-color:#F41FF2" class="resource-color">&nbsp;&nbsp;</td><td style="padding-left: 10px"><div><strong>foo</strong><br>test</div></td></tr>
                <tr id="res-1" class='entry'><td style="background-color:#F4CCC2" class="resource-color">&nbsp;&nbsp;</td><td style="padding-left: 10px"><div><strong>foo</strong><br>test</div></td></tr>
                </table>

Actually I tried this:

 $('#resource-container').removeClass('.entry-selected')

but this doesn't remove the class for each element that have this. How can I fix this?

Upvotes: 1

Views: 2959

Answers (3)

Mouser
Mouser

Reputation: 13304

You must address the correct elements in your code. You are now removing it from the table element:

 $('#resource-container tr.entry-selected').removeClass('entry-selected')

The above should do the trick. It now selects all tr children of the table that have entry-selected as classname.

-- optimised thanks to Rory McCrossan.

$(document).ready(function(){
  $('#resource-container tr.entry').removeClass("entry-selected");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border='1' id='resource-container' style="margin-top: 10px; height: 396px; width: 100%;">
                <tr id="res-1" class='entry entry-selected'><td style="background-color:#FFCCC2" class="resource-color">&nbsp;&nbsp;</td><td style="padding-left: 10px"><div><strong>foo</strong><br>test</div></td></tr>
                <tr id="res-1" class='entry'><td style="background-color:#F41FF2" class="resource-color">&nbsp;&nbsp;</td><td style="padding-left: 10px"><div><strong>foo</strong><br>test</div></td></tr>
                <tr id="res-1" class='entry'><td style="background-color:#F4CCC2" class="resource-color">&nbsp;&nbsp;</td><td style="padding-left: 10px"><div><strong>foo</strong><br>test</div></td></tr>
                </table>

Upvotes: 3

caramba
caramba

Reputation: 22480

Something like this should do the trick: 

$('#resource-container').find('.entry-selected').removeClass('entry-selected')

This will remove all entry-selected classes within the table. Not only on the table rows.

Updated

To remove the class only on <tr> you can do:

 $('#resource-container').find('tr.entry-selected').removeClass('entry-selected')

Upvotes: 3

Robin Mackenzie
Robin Mackenzie

Reputation: 19319

You can iterate the rows and remove the class from any row with the class.

$.each($('#resource-container tr'), function(idx, val) {
  $(this).removeClass('entry-selected');
});

Upvotes: 4

Related Questions