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>