按数据属性隐藏元素

Question

我试图通过数据属性从具有以下结构的表中隐藏元素

我正在尝试像这样隐藏属性为 data-th 的元素：

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

也

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

代码如下：

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>