How to hide a table line div

Question

Good afternoon, I have a table where I show several values, but I have lines where sometimes I have no number and shows N.A.

What I want is to delete a row from the table (div id="ApagarNA") if all columns in that row have N.A.

In the code I’m using Angularjs, and I’ve tried using ng-if="!item.Last && !item.LastUm && !item.LastDois && !item.LastTres" on the div I want to delete, but it erases the line even if some column has numbers, and should not.

The table is this:

And here is a part of my code that corresponds to show one of the lines. For the remaining lines the code is similar.

<!-- 2WK Type -->

<div id="ApagarNA" data-ng-if=$odd class="tableRowOdd" data-ng-show="item.TipoOWS === '2WK'">
     <div class="tableCellContent20">
          <h3 class="cellTextType" ><span>{{::item.TipoCalculado.split('#')[1]}}</span></h3>
     </div>
     <div class="tableCellContent20">
          <h3 class="cellTextValue" data-ng-show="item.Last"><span>{{::item.Last.replace('.',',') | limitTo:7:0}}</span></h3>
          <h3 id="apagarcampo" id="apagarcampo" class="cellTextValueNA" data-ng-show="!item.Last"><span>N.A.</span></h3>
     </div>
     <div class="tableCellContent20">
          <h3 class="cellTextValue" data-ng-show="item.LastUm"><span>{{::item.LastUm.replace('.',',') | limitTo:7:0}}</span></h3>
          <h3 id="apagarcampo" class="cellTextValueNA" data-ng-show="!item.LastUm"><span>N.A.</span></h3>
     </div>
     <div class="tableCellContent20">
          <h3 class="cellTextValue" data-ng-show="item.LastDois"><span>{{::item.LastDois.replace('.',',') | limitTo:7:0}}</span></h3>
          <h3 id="apagarcampo" class="cellTextValueNA" data-ng-show="!item.LastDois"><span>N.A.</span></h3>
     </div>
     <div class="tableCellContent20">
          <h3 class="cellTextValue" data-ng-show="item.LastTres"><span>{{::item.LastTres.replace('.',',') | limitTo:7:0}}</span></h3>
          <h3 id="apagarcampo" class="cellTextValueNA" data-ng-show="!item.LastTres"><span>N.A.</span></h3>
      </div>
</div>

<div id="ApagarNA" data-ng-if=$even class="tableRowEven" data-ng-show="item.TipoOWS === '2WK'">
      <div class="tableCellContent20">
           <h3 class="cellTextType" ><span>{{::item.TipoCalculado.split('#')[1]}}</span></h3>
      </div>
      <div class="tableCellContent20">
           <h3 class="cellTextValue" data-ng-show="item.Last"><span>{{::item.Last.replace('.',',') | limitTo:7:0}}</span></h3>
           <h3 id="apagarcampo" class="cellTextValueNA" data-ng-show="!item.Last"><span>N.A.</span></h3>
      </div>
      <div class="tableCellContent20">
           <h3 class="cellTextValue" data-ng-show="item.LastUm"><span>{{::item.LastUm.replace('.',',') | limitTo:7:0}}</span></h3>
           <h3 id="apagarcampo" class="cellTextValueNA" data-ng-show="!item.LastUm"><span>N.A.</span></h3>
      </div>
      <div class="tableCellContent20">
           <h3 class="cellTextValue" data-ng-show="item.LastDois"><span>{{::item.LastDois.replace('.',',') | limitTo:7:0}}</span></h3>
           <h3 id="apagarcampo" class="cellTextValueNA" data-ng-show="!item.LastDois"><span>N.A.</span></h3>
      </div>
      <div class="tableCellContent20">
           <h3 class="cellTextValue" data-ng-show="item.LastTres"><span>{{::item.LastTres.replace('.',',') | limitTo:7:0}}</span></h3>
           <h3 id="apagarcampo" class="cellTextValueNA" data-ng-show="!item.LastTres"><span>N.A.</span></h3>
      </div>
</div>

I have tried with Javascript, but it happens the same, delete even if one of the columns has number.

<script type="text/javascript">
    var nove_meses = document.getElementById('ApagarNA');
    var h3s = document.querySelectorAll('#apagarcampo span');

    for(var i = 0; i < h3s.length; i++) {
        console.log(h3s[i].innerText);
        if(h3s[i].innerText == 'N.A.') {
            nove_meses.style.display = 'none';
        }
    }
</script>

Answer 1

You are using exhaustive id repetitions, which is incorrect and complicates when using Javascript. The suggestion I could give, at this level, was to remove these id’s and exchange everything for class.

What you can do to remove the line is to use two loops for, one nested in another. The first will traverse the main Ivs by selecting the class. How the classes start with tableRow, you can select all with the selector 'div[class^=tableRow]'.

The second for you will go through all the spans of the Divs with class .cellTextValueNA by checking their texts.

In this case you can check the reverse if any text is different from N.A.. If so, for the bow with break and part to the next element. After the second for you check if the variable x of for is equal to the size of the nodelist, if it is the same, it is because all the texts of the spans of the traversed div is equal to N.A., then you hide her.

See an example, where in the last span second main div (yellow colour) contains a value 2, and with it she is not concealed:

var divs = document.querySelectorAll('div[class^=tableRow]');

for(var i = 0; i < divs.length; i++){

   var h3s = divs[i].querySelectorAll('.cellTextValueNA span');

   for(var x = 0; x < h3s.length; x++){

      if(h3s[x].innerText != 'N.A.') break;
   
   }

   if(x == h3s.length) divs[i].style.display = 'none';

}

.tableRowOdd{
   background: red;
}

.tableRowEven{
   background: yellow;
}

<div id="ApagarNA" data-ng-if=$odd class="tableRowOdd" data-ng-show="item.TipoOWS === '2WK'">
     <div class="tableCellContent20">
          <h3 class="cellTextType" ><span>{{::item.TipoCalculado.split('#')[1]}}</span></h3>
     </div>
     <div class="tableCellContent20">
          <h3 class="cellTextValue" data-ng-show="item.Last"><span>{{::item.Last.replace('.',',') | limitTo:7:0}}</span></h3>
          <h3 id="apagarcampo" id="apagarcampo" class="cellTextValueNA" data-ng-show="!item.Last"><span>N.A.</span></h3>
     </div>
     <div class="tableCellContent20">
          <h3 class="cellTextValue" data-ng-show="item.LastUm"><span>{{::item.LastUm.replace('.',',') | limitTo:7:0}}</span></h3>
          <h3 id="apagarcampo" class="cellTextValueNA" data-ng-show="!item.LastUm"><span>N.A.</span></h3>
     </div>
     <div class="tableCellContent20">
          <h3 class="cellTextValue" data-ng-show="item.LastDois"><span>{{::item.LastDois.replace('.',',') | limitTo:7:0}}</span></h3>
          <h3 id="apagarcampo" class="cellTextValueNA" data-ng-show="!item.LastDois"><span>N.A.</span></h3>
     </div>
     <div class="tableCellContent20">
          <h3 class="cellTextValue" data-ng-show="item.LastTres"><span>{{::item.LastTres.replace('.',',') | limitTo:7:0}}</span></h3>
          <h3 id="apagarcampo" class="cellTextValueNA" data-ng-show="!item.LastTres"><span>N.A.</span></h3>
      </div>
</div>

<div id="ApagarNA" data-ng-if=$even class="tableRowEven" data-ng-show="item.TipoOWS === '2WK'">
      <div class="tableCellContent20">
           <h3 class="cellTextType" ><span>{{::item.TipoCalculado.split('#')[1]}}</span></h3>
      </div>
      <div class="tableCellContent20">
           <h3 class="cellTextValue" data-ng-show="item.Last"><span>{{::item.Last.replace('.',',') | limitTo:7:0}}</span></h3>
           <h3 id="apagarcampo" class="cellTextValueNA" data-ng-show="!item.Last"><span>N.A.</span></h3>
      </div>
      <div class="tableCellContent20">
           <h3 class="cellTextValue" data-ng-show="item.LastUm"><span>{{::item.LastUm.replace('.',',') | limitTo:7:0}}</span></h3>
           <h3 id="apagarcampo" class="cellTextValueNA" data-ng-show="!item.LastUm"><span>N.A.</span></h3>
      </div>
      <div class="tableCellContent20">
           <h3 class="cellTextValue" data-ng-show="item.LastDois"><span>{{::item.LastDois.replace('.',',') | limitTo:7:0}}</span></h3>
           <h3 id="apagarcampo" class="cellTextValueNA" data-ng-show="!item.LastDois"><span>N.A.</span></h3>
      </div>
      <div class="tableCellContent20">
           <h3 class="cellTextValue" data-ng-show="item.LastTres"><span>{{::item.LastTres.replace('.',',') | limitTo:7:0}}</span></h3>
           <h3 id="apagarcampo" class="cellTextValueNA" data-ng-show="!item.LastTres"><span>2</span></h3>
      </div>
</div>

I don’t understand the function of this count = i++;. If you can explain to us comments we can insert in the right place in the code.