Hide specific elements with data-testid-CodePudding

I have a table with columns that shows daily and weekly prices, but I want to hide the daily price. Can i somehow address the data-testid to hide the element?

<td  data-testid="rates.rate-0.price-daily"><p >Pro Tag</p>€  786</td>

I then would need to hide the header of the column as well, but it doesn't have a specific ID. It's the first line here:

<th >Pro Tag</th>
<th >Wochenpreis</th>

any ideas?

CodePudding user response：

Maybe you want to hide td elements having data-testid that ends with .price-daily?

$("td[data-testid$='price-daily']").css('display', 'none');

CodePudding user response：

You can hide this element with the following code:

$("[data-testid='rates.rate-0.price-daily']").hide()

CodePudding user response：

In both cases, the table layout and cell styles are not affected.

In Option 2 Wrap is required because the plain text € 786 cannot be hidden if it does not have a parent.

$(document).ready(function() {

  // Option 1: Remove content
  //$('td[data-testid="rates.rate-0.price-daily"]').html('');
  
  // Option 2: Hide content
  let $div = $('div').css('display', 'none');
  $('td[data-testid="rates.rate-0.price-daily"]').wrapInner($div);

});

table, tr, td {
  border: 1px solid;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td> other column </td>
      <td  data-testid="rates.rate-0.price-daily">
        <p >Pro Tag</p>€ 786
      </td>
      <td> other column </td>
    </tr>
    <tr>
      <td> other column </td>
      <td >
        <p >Pro Tag without data-testid: </p>€ 555</td>
      <td> other column </td>
    </tr>
  </tbody>
</table>