Remove class from table th

user_18048414 0
Viewed 53

I want to remove class "sorting" from the last <th> element of given datatable table.

<th class="sorting" tabindex="0" aria-controls="GetLibraryTable" rowspan="1" colspan="1" style="width: 108.009px;" aria-label="Action: activate to sort column ascending">Action</th>

I tried with below code:

document.querySelector("#GetLibraryTable_wrapper > div.dataTables_scroll > div.dataTables_scrollHead > div > table > thead > tr > th:nth-child(7)").removeClass('sorting');

But this gives below console error:

Uncaught TypeError: document.querySelector(...).removeClass is not a function

asp.net-core-mvc jquery javascript
3 Answers

the jQuery solution is:

$("#GetLibraryTable_wrapper > div.dataTables_scroll > div.dataTables_scrollHead > div > table > thead > tr > th:nth-child(7)").removeClass('sorting');

no jQuery plain Javascript:

document.querySelector("#GetLibraryTable_wrapper > div.dataTables_scroll > div.dataTables_scrollHead > div > table > thead > tr > th:nth-child(7)").classList.remove('sorting');

for better selector use :last-of-type

document.querySelector("#GetLibraryTable_wrapper th:last-of-type").classList.remove('sorting');
user_184615760 

$( "th" ).last().removeClass('sorting');
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="mytable">
  <tr>
    <th class="sorting" tabindex="0" aria-controls="GetLibraryTable" rowspan="1" colspan="1" style="width: 108.009px;" aria-label="Action: activate to sort column ascending">Id</th>
    <th class="sorting" tabindex="0" aria-controls="GetLibraryTable" rowspan="1" colspan="1" style="width: 108.009px;" aria-label="Action: activate to sort column ascending">Action</th>
  </tr>
</table>

user_187716600

I want to remove class "sorting" from the last element of given datatable table

To achieve your requirement, you can try this code snippet using :last-child selector:

document.querySelector("#GetLibraryTable_wrapper > div.dataTables_scroll > div.dataTables_scrollHead > div > table > thead > tr > th:last-child").classList.remove("sorting");

More information about css selectors, can refer this doc: https://www.w3schools.com/cssref/css_selectors.asp

user_67516340
Related