hide div if value is blank (javascript)

Question

I am working on a phonebook. In html I have a div #containerAgenda which won't show if there are no added contacts. However, I created the function to delete a row or multiple rows. So if I add and then delete all contacts, I want the div to hide. I am not sure how to set the value to blank or empty so that I can apply the rule .classList.remove in the deleteRow function(I added the way I tried to define the input value as empty). Would you give me any hints? Below is my code: P.S. I am quite a beginner so I appreciate non-complicated solutions :)

<script>
            var persoane =[]; 
            function deseneazaTabel(){
                str = ""; 
                for (var i = 0; i < persoane.length; i++){
                    str += `<tr>
                            <td>${persoane[i].name}</td>
                            <td>${persoane[i].telefon}</td>
                            <td><span class="editButton" onclick="editeaza();">EDIT</span></td>
                            <td><span class="deleteButton" onclick="deleteRow(${i});">STERGE</span></td>
                            </tr>`;
                }
                document.querySelector("table tbody").innerHTML=str;
            }
            var pers = {};
            function adaugaContact(form,event){
                event.preventDefault(); 
                var inputs = form.querySelectorAll("input[name]"); 
                for (var i=0; i<inputs.length; i++){
                    var a = inputs[i].getAttribute("name"); 
                    var v = inputs[i].value; 
                    pers[a] = v; 
                }
                persoane.push(pers); 
                document.querySelector("#containerAgenda").classList.remove("hidden"); 
                deseneazaTabel();
            }
            
            function deleteRow (idx){
                persoane.splice(idx,1);
                if(document.querySelectorAll("input[name]").value === ""){
                    document.querySelector("#containerAgenda").classList.add("hidden");
                }
                deseneazaTabel();
            }
         </script>

<body onload="deseneazaTabel();">
        <h1>AGENDA</h1>
        <form class="orangeText centerText" onsubmit="adaugaContact(this,event);">
            <label for ="name">Nume</label>
            <input type="text" name="name" id="name">
            <label for="telefon">Telefon</label>
            <input type="text" name="telefon" id="telefon">
            <br/>
            <input type="submit" class="btn" value="ADAUGA CONTACT">
        </form>
        <div id="containerAgenda" class="orangeText centerText hidden">
            <table id="inputs">
                <thead>
                    <tr>
                        <td>Nume</td>
                        <td>Telefon</td>
                        <td></td>
                        <td></td>
                    </tr>    
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </body>
</html>

Just code · Accepted Answer · 2018-11-19 06:09:36Z

What you need is if

(persoane.length === 0) {
    document.getElementById('containerAgenda').style.display = 'none';
  } else {
    document.getElementById('containerAgenda').style.display = 'block';
  }

inside deseneazaTabel function

I also added deleteAll functionality which was missing from your question please check demo

var persoane = [];



function deseneazaTabel() {
  if (persoane.length === 0) {
    document.getElementById('containerAgenda').style.display = 'none';
  } else {
    document.getElementById('containerAgenda').style.display = 'block';
  }
  str = "";
  for (var i = 0; i < persoane.length; i++) {
    str += `<tr>
                            <td>${persoane[i].name}</td>
                            <td>${persoane[i].telefon}</td>
                            <td><span class="editButton" onclick="editeaza();">EDIT</span></td>
                            <td><span class="deleteButton" onclick="deleteRow(${i});">STERGE</span></td>
                            </tr>`;
  }
  document.querySelector("table tbody").innerHTML = str;
}

function DeleteALL() {
  persoane = [];
  deseneazaTabel();
}
var pers = {};

function adaugaContact(form, event) {
  event.preventDefault();
  var inputs = form.querySelectorAll("input[name]");
  for (var i = 0; i < inputs.length; i++) {
    var a = inputs[i].getAttribute("name");
    var v = inputs[i].value;
    pers[a] = v;
  }
  persoane.push(pers);
  document.querySelector("#containerAgenda").classList.remove("hidden");
  deseneazaTabel();
}

function deleteRow(idx) {
  persoane.splice(idx, 1);
  if (document.querySelectorAll("input[name]").value === "") {
    document.querySelector("#containerAgenda").classList.add("hidden");
  }
  deseneazaTabel();
}

<body onload="deseneazaTabel();">
  <h1>AGENDA</h1>
  <form class="orangeText centerText" onsubmit="adaugaContact(this,event);">
    <label for="name">Nume</label>
    <input type="text" name="name" id="name">
    <label for="telefon">Telefon</label>
    <input type="text" name="telefon" id="telefon">
    <br/>
    <input type="submit" class="btn" value="ADAUGA CONTACT">
  </form>
  <input type="submit" class="btn" onClick="DeleteALL()" value="Delete ALL">
  <div id="containerAgenda" class="orangeText centerText hidden">
    <table id="inputs">
      <thead>
        <tr>
          <td>Nume</td>
          <td>Telefon</td>
          <td></td>
          <td></td>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
  </div>
</body>

</html>

Lovlesh · Accepted Answer · 2018-11-19 06:05:31Z

1

This can help you

function checkIfNoContact() {
    if(document.querySelectorAll("tr").length <= 0 ) {
     document.querySelector("#containerAgenda").classList.add("hidden");
    } else {
     document.querySelector("#containerAgenda").classList.remove("hidden");
    }
}

answered Nov 19, 2018 at 6:05

Lovlesh

8425 silver badges15 bronze badges

Comments

Ehsan Seyedi · Accepted Answer · 2018-11-19 06:04:40Z

-1

You can Use jQuery It will check if there wasn't any <tr> in <tbody>, then hides div#containerAgenda

I hope it works for you.

if ( $("#containerAgenda tbody").children().length == 0 ) {
    $("#containerAgenda").hide();
}

answered Nov 19, 2018 at 6:04

Ehsan Seyedi

725 bronze badges

Collectives™ on Stack Overflow

hide div if value is blank (javascript)

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related