Динамически скрывать поле div, если оно пустое, используя CSS

Question

<div>Claim Number: <b style="background-color: inherit;">[ClaimNo]</b></div>
<div>Employee Name: <b style="background-color: inherit;">[EmployeeName]</b></div><div>Loss Date: <b style="background-color: inherit;">[LossDate]</b></div>
<div>Insured Name: <b style="background-color: inherit;">[InsuredName]</b></div>
<div>Jurisdiction State: <b style="background-color: inherit;">
[JurisdictionState]</b></div>
<div>Supervisor: <b style="background-color: inherit;">[Supervisor]</b></div>
<div>Claim Handler: <b style="background-color: inherit;">[ClaimHandler]</b></div>
<div>Claim Status: <b style="background-color: inherit;">[ClaimStatus]</b></div>
<div><br></div><div>First Date Of Incapacity: <b>[FirstDayOfIncapacity]</b></div>
<div>Return To Work Date: <b>[ReturnToWorkDate]</b></div><div><span style="font-family: &quot;Jost*&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-size: 15px;">Number Of Weeks: </span><b style="font-family: &quot;Jost*&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-size: 15px;">[NumberOfWeeks] </b></div><div>Weeks Of Incapacity:<b style="background-color: inherit;"> [WeeksOfIncapacity]</b></div>
<div>Days Of Incapacity: <b style="background-color: inherit;">[DaysOfIncapacity]</b></div>
<div>Calculated Return To Work Date: <b>[CalculatedReturnToWorkDate] </b></div>
<div><br></div><div>Calculated By: <b>[CalculatedBy]</b>     Calculated On: <b>[CalculatedOn]</b></div>

У меня есть несколько элементов, которые динмически добавляются из базы данных для каждого поля в каждом элементе. Теперь есть, например, поле DaysOfIncapacity, которое иногда пустое и не имеет данных. Я хочу скрыть это поле, если оно пустое.

Answer 1

Если вам нужно скрыть весь div, когда внутренний дочерний элемент пуст, тогда вы не можете использовать псевдокласс :empty, потому что сам div не будет пустым.

Так что, если вы хотите CSS -только решение, обходной путь должен напечатать значение также как атрибут элемента div

<div data-value="[DaysOfIncapacity]">
    Days Of Incapacity: <b style="background-color: inherit;">[DaysOfIncapacity]</b>
</div>

и скрыть элемент, когда атрибут пусто, например

div[data-value=""] { display: none }

---

В противном случае вам нужно использовать JS: циклически перебирать все элементы <b>, читать их свойства .textContent и при необходимости скрывать родительский элемент

var b = document.querySelectorAll('b');
[...b].forEach((data) => {
   if (data.textContent === '') {
     data.parentNode.style.display = 'none'; 
     //or add a class that hides the element
   }
});

<div>Amount 1 <b>100</b></div>
<div>Amount 2 <b></b></div>
<div>Amount 3 <b>200</b></div>

Answer 2

Боюсь, что невозможно скрыть div (родительский) в соответствии с содержимым b (дочернего) элемента.

Для этого вам нужно использовать Javascript:

• найти все b элементы и проверить их содержимое
• , если оно пустое скрыть родительский элемент div установив display: none; css свойство.