asked on

Using tag name and javascript to remove a class

I am using a datatable that, when certain features are added, such as the scroll feature, a second header is added.

The second header, is outside of the main table, and that is the one I am using for my table, since it's the one that allows me to click the header to sort the columns. The other header doesn't do it for some reason.

The issue I am having is, I have a class called "cards" that I add and remove to the table with javascript when a button is clicked. This allows me to switch the table between grid and card view.

I have the cards class in the table by default, but it adds it to the second header as well per the dataTable code. When I use javascript to remove the "cards" class it only removes it from the first header, not the second header because it's using the table id to do so.

I tried using tag name to remove the class, but that doesn't seem to be working. The table for this second header doesn't have an id, and as far as I know, there isn't a way to add an id for it. Is there a way I can use javascript to toggle(add and remove) the cards class from the second header?

Here is a simplified version of the code to offer a better understanding.

<div class="dataTables_scrollHead">
<table class="cards">
<thead>
<tr>
<th>Second Header added by Datatable</th>
</tr>
</thead>
</table>
</div>
<div class="dataTables_scrollBody">
<table id="TableTeamGrid" class="cards">
<thead>
<tr>
<th>First Header</th>
</tr>
</thead>
</table>
</div>

Open in new window

The second header is the header that I am showing, but I don't want it to show when the card view is displayed with the javascript. It should be hidden, but because I can't remove the cards style I can't get it to hide and display when I am using the buttons to toggle between the different views.

This is the jquery that I am using to remove and add the cards style.

$(document).ready(function toggleDataTable() {
    
    $('#lnkViewCard').click(function () {

        $('#TableTeamGrid').addClass("cards");

    });
    $('#lnkViewList').click(function () {
        $('#TableTeamGrid').removeClass("cards");
    });
});

Open in new window

Julian Hansen

How about

$('.cards').removeClass('cards')

Open in new window

- that will remove all instances of cards from all elements.

lenamtl

Hi,

Are you trying to change from table view to view card?
check this example https://jsfiddle.net/lenamtl/0w5on341/

Starr Duskk

ASKER

@Julian - Sorry, I should have phrased my question better. I need to be able to add back in the class, not just remove it. Like what I am doing with #TableTeamGrid in the provided javascript. I am adding the cards style and removing it with a click of a button.

@Lenamtl - No, I already have it set up to do that. Thank you.

Sam Jacobs

You can use the eq() selector to add/remove the nth occurrence of the class. It is zero based - so, for example to remove the second occurrence:

$( "table:eq( 1 )" ).removeClass("cards");

Open in new window

Starr Duskk

ASKER

@Sam
I typed it in as you had it, but I replaced the number with 2, since it was the third class in the table. It did not remove the style.

$("table:eq( 2 )").removeClass("cards");

Open in new window

SOLUTION

Sam Jacobs

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

lenamtl

Hi,

In the example I provided It use toggleClass to switch the class instead of removing you may want to try it, this is more flexible for switching from 2 views.
from the example https://jsfiddle.net/lenamtl/0w5on341/

check this part

$('#btToggleDisplay').on('click', function () {
                $("#register").toggleClass('cards')
                $("#register thead").toggle()
})

Open in new window

Starr Duskk

ASKER

Thank you for your willingness to help answer my question! I appreciate it! :)