0

I'm trying to hide element from table with the following structure by data attribute

I'm trying to hide the element with attribute data-th like that:

$('table.mui-table.schedule-table tbody tr > [data-th="Principal"]').hide();

Also 

$('table.mui-table.schedule-table tbody tr td [data-th="Principal"]').hide();

Here's the code:

const hideOne = () =>
  $('table.mui-table.schedule-table tbody tr > [data-th="Principal"]').hide();

const hideTwo = () =>
  $('table.mui-table.schedule-table tbody tr td [data-th="Principal"]').hide();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="mui-table schedule-table" data-mui-borders="true">
       <thead>
          <tr class="schedule-head">
             <th>Payment</th>
             <th>Payment Amt</th>
             <th>Principal</th>
             <th>Interest</th>
             <th>Total Interest</th>
             <th>Balance</th>
             <th></th>
          </tr>
       </thead>
       <tbody>
          <tr>
             <td data-th="Payment">1</td>
             <td data-th="Payment Amt">€90.39</td>
             <td data-th="Principal">€90.00</td>
             <td data-th="Interest">€0.39</td>
             <td data-th="Total Interest">€0.39</td>
             <td data-th="Balance"><strong>€-0.00</strong></td>
          </tr>
       </tbody>
    </table>
    
    <button onclick="hideOne()">One</button>
    <button onClick="hideTwo()">Two</button>
OliverRadini
  • 6,238
  • 1
  • 21
  • 46
Stephanie Kostova
  • 78
  • 1
  • 7
  • 1
    Welcome to Stack Overflow! Please take the [tour], have a look around, and read through the [help], in particular [*How do I ask a good question?*](/help/how-to-ask) Please post code and markup and such **as text**, not as a *picture* of text. Why: http://meta.stackoverflow.com/q/285551/157247 – T.J. Crowder Mar 08 '19 at 13:08
  • Since 'mui-table' and `schedule-table` are both separate classes you don't need to use both you can use `$('table.mui-table tbody tr td [data-th="Principal"]').hide();` or `$('table.schedule-table tbody tr td [data-th="Principal"]').hide();` – darkhouse Mar 08 '19 at 13:08
  • 2
    Eyeballing it, this looks like it should work, but I'm not going to transcribe the code in your picture into a test case to see for myself. – Quentin Mar 08 '19 at 13:08
  • 1
    Your first selector is fine and would seem to target the relevant cell. A similar example [works for me](https://jsfiddle.net/g8vnk7u6/) provided those elements exist as of when you run that code. – T.J. Crowder Mar 08 '19 at 13:09
  • 1
    @darkhouse - Perhaps there are other tables that use only one or the other, and the OP wants to leave those alone. – T.J. Crowder Mar 08 '19 at 13:09
  • 1
    To me the first selector looks fine, but the second doesn't. (It would if you removed the space after the `td` though.) But as another comment said, it's not easy to test when you post as an image. – Robin Zigmond Mar 08 '19 at 13:10
  • @RobinZigmond - Good catch! – T.J. Crowder Mar 08 '19 at 13:12
  • 1
    @darkhhouse I tried both ways and not working.. – Stephanie Kostova Mar 08 '19 at 13:12
  • @stephanie - I suspect the elements don't exist in the DOM as of when you're running your code (e.g., [this problem](http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element)). – T.J. Crowder Mar 08 '19 at 13:13
  • 1
    Have you taken a look at your browser console. Are you seeing anything there?? Your selectors look fine, i have tested them. – Gagan Deep Mar 08 '19 at 13:14
  • Oh, thank you guys! The table is generated by js script... – Stephanie Kostova Mar 08 '19 at 13:18
  • 1
    @StephanieKostova - Glad that helped! You can close your own question as a duplicate by copying and pasting the [link](http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) and then choosing "close" at the bottom of the question and following the steps for a duplicate. Happy coding! – T.J. Crowder Mar 08 '19 at 13:24
  • Possible duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) – user3783243 Mar 11 '19 at 21:32

0 Answers0